通过FlowRouter / ReactLayout

Question

在过去的几周里，我一直在学习React以及如何将它与Meteor集成。我遇到的一个问题是，当使用FlowRouter和ReactLayout时，我似乎无法弄清楚如何将属性/函数从父/布局组件传递给ReactLayout呈现的子组件。这是我想要做的一个例子：

// Layout component with function to pass
MainLayout = React.createComponent({
  functionToPass() {
  do some stuff...
  },

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

// Component to pass into main layout
DynamicComponent1 = React.createComponent({
  render() {
    return (
      <div>
        <h1>This component will change</h1>
        <button onClick={this.props.functionToPass}>Press me!</button> // property passed from layout component
      </div>
    )
  }
});

// FlowRouter
FlowRouter.route('/', {
  action() {
    ReactLayout.render(MainLayout, {
      content: <DynamicComponent1 />  // Somehow I need to pass MainLayout.functionToPass() to DynamicComponent1 here
    }
  }
});

我应该注意，我知道如何将属性传递给不动态更改的组件 - 直接在MainLayout中呈现。然而，这不是我想要做的。非常感谢！

Answer 1

如果您将函数作为propComponent1传递，那么我相信您应该从ReactLayout.render调用内部将函数传递给DynamicComponent1。

ReactLayout.render(MainLayout, {
  content: <DynamicComponent1 functionPassed={MainLayout.functionToPass} />
}

您可以通过this.props.functionPassed访问传递的功能。

这可能不是最佳做法，但在使用ReactLayout时至少应该有效。