javascript - 在 Meteor 中使用 React Layout 将 Prop 传递给曾孙组件

Question

我只是想知道完成这个 React 任务的最佳方法是什么。 比如说，我有一个像这样的组件:

App = React.createClass({
  //mixins: [ReactMeteorData],

  // Initial State declared here.
  getInitialState() {
    return {};
  },

  proxyState(state) {
    console.log(`Triggered proxyState, top-level: ${state}`);
  },

  render() {
    return (
      <div>
        {this.props.layout}
      </div>
    );
  }

});

我需要能够传递下去proxyState(state)到曾孙组件，子组件(和孙组件)将使用 ReactLayout 渲染.

例如，这里有一些来自 FlowRouter 的代码，显示了我当前如何渲染与该链相关的组件:

FlowRouter.route('/proxies', {
  name: 'proxies',
  action() {
    const content = <ProxyPage />;
    ReactLayout.render(App, {
      title: 'Proxies',
      layout: <MainLayout content={content} />
    });
  }
});

内容呈现得很好，但我不明白该怎么做是通过 proxyState()下降到 <MainLayout /> (随后， <ProxyPage /> 将在其中呈现，然后 <ProxyForm /> 将在其中呈现。

如有任何帮助，我们将不胜感激。我对传递 props 的概念很陌生，我想这对于已经写 React 东西 3 天的人来说可能是半高级的东西。提前致谢!

如果有人需要查看我的其余代码以了解我在寻找什么，该项目(当前)位于公共(public)存储库中:https://bitbucket.org/czbaker/karuto

Answer 1

将 props 传递给 child 最简单的方法就是直接传递它们:

var Child = React.createClass({
  render: function() {
    return (
      <div>{this.props.myProp}</div>
    );
  }
});

var Parent = React.createClass({
  getDefaultProps: function() {
    return (
      someProp: "I'm a prop value!"
    );
  },
  render: function() {
    return (
      <Child myProp={this.props.someProp} />
    );
  }
});

假设你有一个树状家庭结构，你可以让 parent 不断地传递你需要他们传递的 Prop 。

但是，上面的代码可能会有点乏味，尤其是当你想将 prop 发送到深树中的每一层时。为了让生活更简单，React 有一个名为 context 的概念。这些允许您指定一个 prop 以供父 prop 的所有子级使用，无论深度如何。

我不会从文档中复制/粘贴示例，所以请在此处查看:https://facebook.github.io/react/docs/context.html随时提问 :)