传递一个属性从父元素反应的子元素动态通过FlowRouter/ReactLayout

Question

我一直在学习反应，如何将其与流星，在过去的几个星期整合。有一个问题我一直在运行之中，是使用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

如果您传递函数为道具，以DynamicComponent1，那么我相信你应该从ReactLayout.render调用内部传递函数DynamicComponent1。

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

您可以通过this.props.functionPassed访问传递的函数。

这可能不是最好的做法，但它应该使用ReactLayout时至少工作。