reactjs – React路由器和this.props.children – 如何将状态传

发布时间：2020-12-15 06:24:34 所属栏目：百科来源：网络整理

导读：我第一次使用React-router，而且我不知道如何去思考。以下是我在嵌套路由中加载组件的方法。入口点.js ReactDOM.render( Router history={hashHistory} Route path="/" component={App} Route path="models" component={Content} /Route /Router,document.g

我第一次使用React-router，而且我不知道如何去思考。以下是我在嵌套路由中加载组件的方法。

入口点.js

ReactDOM.render(
    <Router history={hashHistory} >
        <Route path="/" component={App}>
            <Route path="models" component={Content}>
        </Route>
    </Router>,document.getElementById('app')
);

App.js

render: function() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }

所以我的应用程序的孩子是我发送的内容组件。我使用Flux，我的App.js有状态并监听更改，但我不知道如何将该状态传递给this.props.children 。在使用反应路由器之前，我的App.js明确定义了所有的孩子，所以传递状态是自然的，但我现在看不到如何做。

使用几个React帮助器方法，您可以向this.props.children添加状态，道具和其他任何内容

render: function() {
  var children = React.Children.map(this.props.children,function (child) {
    return React.cloneElement(child,{
      foo: this.state.foo
    })
  })

  return <div>{children}</div>
}

那么你的子组件可以通过道具this.props.foo来访问它。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!