2015-11-22 51 views
0

我一直在學習反應,如何將其與流星,在過去的幾個星期整合。有一個問題我一直在運行之中,是使用FlowRouter和ReactLayout的時候,我似乎無法弄清楚如何通過從父/佈局組件特性/功能於ReactLayout呈現子組件。這裏是什麼,我試圖做一個例子:傳遞一個屬性從父元素反應的子元素動態通過FlowRouter/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直接呈現。然而,這不是我想要做的。非常感謝!

回答

0

如果您傳遞函數爲道具,以DynamicComponent1,那麼我相信你應該從ReactLayout.render調用內部傳遞函數DynamicComponent1。

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

您可以通過this.props.functionPassed訪問傳遞的函數。

這可能不是最好的做法,但它應該使用ReactLayout時至少工作。

+0

謝謝。我其實是這樣試過的,沒有任何運氣。我遵循這個線程,最終克隆了元素以使其運行。我會更喜歡你提出的解決方案,但我沒有任何運氣。 https://forums.meteor.com/t/how-to-pass-reactive-data-to-children-using-flow-router-and-react-layout/11888/5 – bgmaster

+0

有趣,我很好奇,爲什麼這種方法適用於某些人,但其他人不得不求助於克隆...... – etmarch

相關問題