如何在 ReactJs 中将值从父元素传递给子元素？

Question

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

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

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

Answer 1

您通常不会像在React.render调用中那样渲染子元素，而是将IndexDashboard移动到MainLayout组件的渲染中，以便您可以向它传递所需的道具。

根据您的评论进行编辑：在动态渲染子项的情况下，我建议根据您所在的页面将其作为道具传递。 我不知道 JSX 是否支持该语法，但您肯定可以使用React.createElement 。

React.render(
  <MainLayout childProp={ IndexDashboard }/>,
document.body);

#MainLayout
render: function(){ (
  return (
    React.createElement(this.props.childProp, [otherProps...])
  )       
}

我不确定你所说的“它不是父级内部的”是什么意思，因为它很明显是用它呈现的。 如果您绝对不能将子级移动到父级渲染函数，您可能希望使用类似通量的架构，使用存储来容纳MainLayout和IndexDashboard都需要的数据

Answer 2

您可以使用 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