Javascript 对子组件使用React Router-Pass方法

我在一个名为“Create”的组件中嵌套了一个按钮，该按钮必须触发状态更改，从而更改app.js中的状态并呈现一个新视图

我似乎无法将方法changeHPage从app.js传递到Create组件。我正在使用React Router，通常我只需编写

将方法传递给其子组件，并使用this.props.changeHpage调用它，但在使用React Router时，我无法通过此方法传递props

任何关于如何使用React路由器将方法传递给子组件的帮助都将不胜感激。我的代码可以在下面找到

app.js：

    /* STRICT MODE: See `../../server.js` */
'use strict';

/* GLOBAL REACT REQUIRES */
// React.js
const React = require('react');
// React-DOM for HTML rendering
const ReactDOM = require('react-dom');
// React router for dynamic pathing. Has several component features that need to be required to use.
const ReactRouter = require('react-router');
// 4 components pulled from ReactRouter:
const Router = ReactRouter.Router;
const Route = ReactRouter.Route;
const Navigation = ReactRouter.Navigation;
const Link = ReactRouter.Link;
const browserHistory = ReactRouter.browserHistory;

/* Relative paths to external components */
const auth = require('./helpers/auth.js');
const requireAuth = require('./helpers/requireauth.js');
const About = require('./components/about.js');
const Login = require('./components/login.js');
const Logout = require('./components/logout.js');
const Signup = require('./components/signup.js');
const Header = require('./components/header.js');
const Create = require('./components/create.js');
const NotFound = require('./components/notfound.js');
const Veri = require('./components/veri.js');


/* React App Creation */
const App = React.createClass({
  // Declares the initial state when app is loaded
  getInitialState : function() {
    return {
      loggedIn: auth.loggedIn(),
      change: true,
      phoneNumber: {}
    }
  },

  // Updates state when login is trigger
  updateAuth : function(loggedIn) {
    this.setState({
      loggedIn: loggedIn
    })
  },



  changeHPage: function() {
    this.state.change = !this.state.change;
    this.setState({
      change: !this.state.change
    });
    console.log("changePage On HomePage Pressed");
    this.context.router.push('/')
  },




  // Login even triggered and sent to back-end
  componentWillMount : function() {
    auth.onChange = this.updateAuth
    auth.login()
  },


  addNumber: function(phonenumber){

    this.state.phonenumber = phonenumber
    this.setState()

  },


  // Renders App and all of its children
  render : function() {

    <div className="Detail">
        {this.props.children && React.cloneElement(this.props.children, {
          changeHPage: this.changeHPage
        })}
      </div>

    var firstView;


      {if(this.state.change) {
        firstView = <div>
      <div className="row">
      <Veri> This is a child of Veri </Veri>
      <Header details="Hi, I'm Plantee"/>
        <section className="col s12">
        <ul>
            {this.state.loggedIn ? (
              <div>
                <li><Link to="/logout">Log out</Link> </li>
                <li><Link to="/create">Create Your Plantee</Link></li>
                {/*<Create> <Veri/> </Create>*/}
             </div>
            ) : (
              <div>
                <li><Link to="/login">Log In</Link></li>
                <li><Link to="/signup">Sign up</Link></li>
             </div>
            )}
          <li><Link to="/about">About</Link></li>
        </ul>
        {this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>}
        </section>
      </div> </div>

    } else {
      firstView= <div>'Hello'</div>
    }
      return React.cloneElement(
        firstView,
        {switch: this.changeHPage}
      )

  }}

})





/* React router initialization */
var routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App} >
    <Route path="header" component={Header} />
      <Route path="login" component={Login} />
      <Route path="logout" component={Logout} />
      <Route path="create" component={Create} change={App.changeHPage} />
      <Route path="signup" component={Signup} />
      <Route path="about" component={About} />
      <Route path="very" component={Veri} />
    </Route>
    <Route path="*" component={NotFound} />
  </Router>
)

ReactDOM.render(routes, document.querySelector('#container'))

/*严格模式：请参阅`..//server.js`*/
"严格使用",；
/*全球反应需要*/
//React.js
const React=require（'React'）；
//React-DOM用于HTML呈现
const ReactDOM=require（'react-dom'）；
//反应路由器的动态路径。具有多个需要使用的组件功能。
const ReactRouter=require（'react-router'）；
//从路由器拉出的4个组件：
const Router=ReactRouter.Router；
const Route=ReactRouter.Route；
const Navigation=ReactRouter.Navigation；
const Link=ReactRouter.Link；
const browserHistory=ReactRouter.browserHistory；
/*到外部组件的相对路径*/
const auth=require（'./helpers/auth.js'）；
const requireAuth=require（'./helpers/requireAuth.js'）；
const About=require（'./components/About.js'）；
const Login=require（'./components/Login.js'）；
const Logout=require（'./components/Logout.js'）；
const Signup=require（'./components/Signup.js'）；
const Header=require（'./components/Header.js'）；
const Create=require（'./components/Create.js'）；
const NotFound=require（'./components/NotFound.js'）；
const Veri=require（'./components/Veri.js'）；
/*React应用程序创建*/
const App=React.createClass({
//声明加载应用程序时的初始状态
getInitialState:函数（）{
返回{
loggedIn:auth.loggedIn（），
变化：是的，
电话号码：{}
}
},
//在触发登录时更新状态
updateAuth:函数（loggedIn）{
这是我的国家({
loggedIn:loggedIn
})
},
changeHPage:function（）{
this.state.change=！this.state.change；
这是我的国家({
更改：！this.state.change
});
console.log（“主页上的更改页按下”）；
this.context.router.push（“/”）
},
//登录甚至被触发并发送到后端
componentWillMount:function（）{
auth.onChange=this.updateAuth
auth.login（）
},
addNumber：函数（电话号码）{
this.state.phonenumber=电话号码
this.setState（）
},
//呈现应用程序及其所有子项
render:function（）{
{this.props.children&&React.cloneElement（this.props.children{
changeHPage:this.changeHPage
})}
var firstView；
{if（this.state.change）{
第一视图=
这是威利的孩子

{this.state.loggedIn(
注销
创建您的Plantee
{/*  */}
) : (
登录
报名
)}
关于

{this.props.children | | |您已{！this.state.loggedIn&“not”}登录。
}
}否则{
firstView='你好'
}
返回。克隆元素(
第一视图，
{switch:this.changeHPage}
)
}}
})
/*反应路由器初始化*/
变量路由=(
)
render（路由、文档、查询选择器（“#容器”））

create.js：

const React = require('react');
const ReactDOM = require('react-dom');
const auth = require('../helpers/auth')
const Veri = require('./veri.js');
const App = require('../app.js');

const ReactRouter = require('react-router');
// 4 components pulled from ReactRouter:
const Router = ReactRouter.Router;
const Route = ReactRouter.Route;
const Navigation = ReactRouter.Navigation;
const Link = ReactRouter.Link;
const browserHistory = ReactRouter.browserHistory;


const Create = React.createClass({

  getInitialState: function(){
    return {checked: false}
  },
  handleClick: function(event) {
    event.preventDefault();
    this.setState({checked: !this.state.checked})

    let phonenumber = {
      phonenumber: this.refs.phonenumber.value
    }

  },

  showVerification : function(event) {
    event.preventDefault();

  },


  remove(e) {
    e.preventDefault();
    console.log(this.props);
  },

  render : function(){

    var msg;
    {if(this.state.checked) {
      msg = <div><Veri text={'Your verification code is '}  code={'code'}/> <form className="gotIt" onSubmit={this.props.changeHpage} >
      <input type="Submit" value="Got It" />
       </form> </div>
    }
    else {
      msg = <Veri details={''}/>
    }}

    return (

      <div>
      <h1>Create Your Plantee</h1>

      <h2>Please Enter Your Phone Number</h2>
      <p>You will recieve a phone call in order to verify that you are capable of raising a plantee</p>



      <form className="telephoneNumber" onSubmit={this.handleClick}>
         <input id="phonenumber" ref="phonenumber" type="tel" />
         <input type="Submit" />
       </form>
       <div> {msg} </div>

       <h3>{this.props.children}</h3>


       </div>
    )
  }
})

module.exports = Create;

const React=require（'React'）；
const ReactDOM=require（'react-dom'）；
const auth=require（“../helpers/auth”）
const Veri=require（'./Veri.js'）；
const App=require（'../App.js'）；
const ReactRouter=require（'react-router'）；
//从路由器拉出的4个组件：
const Router=ReactRouter.Router；
const Route=ReactRouter.Route；
const Navigation=ReactRouter.Navigation；
const Link=ReactRouter.Link；
const browserHistory=ReactRouter.browserHistory；
const Create=React.createClass({
getInitialState:函数（）{
返回{checked:false}
},
handleClick:函数（事件）{
event.preventDefault（）；
this.setState（{checked:！this.state.checked}）
让电话号码={
phonenumber:this.refs.phonenumber.value
}
},
showVerification：功能（事件）{
event.preventDefault（）；
},
删除（e）{
e、 预防默认值（）；
console.log（this.props）；
},
render:function（）{
var-msg；
{if（this.state.checked）{
味精=
}
否则{
味精=
}}
返回(
创建您的Plantee
请输入您的电话号码
您将接到一个电话，以验证您是否有能力饲养一个种植户

{msg}
{this.props.children}
)
}
})
module.exports=创建；

请查看以下github问题： 这是直接取自：ryanflorence

通常，如果跨越管线边界传递道具，则父管线确切地知道其渲染的内容：

<Route path="/inbox" component={Inbox}>
  <Route path=":messageId" component={Message}/>
  <IndexRoute component={InboxStats}/>
</Route>

const Inbox = React.createClass({
  render() {
    return (
      <div>
        {/* this is only ever `Message`, except the weird case
          of `InboxStats` which doesn't need the prop */}
        {React.cloneElement(this.props.children, {
          onDelete: this.handleMessageDelete
        })}
      </div>
    )
  }
})

const Inbox=React.createClass({
render（）{
返回(
{/*这是唯一的“消息”，除了奇怪的情况
不需要属性*/}
{React.cloneElement（this.props.children{
onDelete:this.handleMessageDelete
})}
)
}
})

相反，使用无组件的路线，只做“正常”的反应

<Route path="/inbox" component={Inbox}>
  {/* no more `Message` */}
  <Route path=":messageId"/>
</Route>

const Inbox = React.createClass({
  render() {
    const { messageId } = this.props.params
    return (
      <div>
        {messageId ? (
          <Message onDelete={this.handleMessageDelete}/>
        ) : (
          <InboxStats/>
        )}
      </div>
    )
  }
})

{/*不再有`消息'*/}
const Inbox=React.createClass({
render（）{
const{messageId}=this.props.params
返回(
{messageId(
) : (
)}
)
}
})

氯