javascript - 如何在 ReactJs 中将值从父元素传递到子元素？

Question

如果我有嵌套的 React 元素，当子元素不在父元素内部时，如何将父元素中的值传递给子元素。

React.render(
  <MainLayout>
    <IndexDashboard />
  </MainLayout>,
  document.body);

在此代码中，我希望能够在 IndexDashboard 元素中访问 MainLayout 元素中的一些函数。如何将这些函数传递给子元素？

Answer 1

可以使用cloneElement函数修改子组件的props:

#MainLayout

render: function(){ (
  var contents = React.Children.map(this.props.children, function(child) {
    return React.cloneElement(child, {onSomeEvent: this.onSomeChildEvent})
  }.bind(this));

  return (
        <div>
            {contents}
        </div>
  );       
}

详情请参阅以下链接:https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html