在Meteor中使用ReactLayout將傳遞道具傳遞給曾孫組件

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 />這在其中渲染。

任何幫助將不勝感激。 我不熟悉傳遞道具的概念，對於可能已經寫了3天的React東西的人來說，這可能是一件半高級的事情。 提前致謝！

如果有人需要查看我的其余代碼以了解我要尋找的內容，則該項目（當前）在公共存儲庫中： https : //bitbucket.org/czbaker/karuto

Answer 1

將道具傳遞給孩子的最簡單方法是直接將它們傳遞給孩子：

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} />
    );
  }
});

假設您有一個樹家庭結構，您可以讓父母不斷傳遞您需要他們傳遞的道具。

但是，上面的內容可能會有點乏味，尤其是當您要將道具發送到一棵深樹的每一層時。 為了簡化生活，React有一個稱為context的概念。 這些允許您指定一個道具，以供父道具的所有子代使用，而不管其深度如何。

我不會從文檔中復制/粘貼示例，因此請在此處進行檢查： https : //facebook.github.io/react/docs/context.html並隨時提出問題:)