從子組件中更新父組件

我無法從子組件中重新提交父組件 - 我將componentDidMount作爲道具傳遞給子類，然後在那裏調用它，並期望父級重新提交。渲染函數被調用，但內容保持不變。怎麼了？從子組件中更新父組件

var Parent = React.createClass({ 
    getInitialState: function() { return {content: 'clean'}; }, 
    componentDidMount: function() { 
     this.setState({content: 'changed!'}); 
    }, 
    render: function() { 
     return React.createElement('div', {rerender: this.componentDidMount.bind(this)}, this.state.content); 
    } 
}); 

var Child = React.createClass({ 
    render: function() { 
     return React.createElement('div', {onClick: this.handleClick}, 'click me'); 
    }, 
    handleClick: function() { 
     this.props.rerender(); 
    } 
}); 

ReactDOM.render(
     React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory}, 
       React.createElement(ReactRouter.Route, {path: '/parent', component: Parent}) 
     ) 
, document.getElementById('content'));

來源

2016-08-22 user99999

發送一個類方法作爲道具回調到子組件，該回調需要在父組件中設置'setState' –

但是，這是exacly我在我的例子 – user99999

做的事情不要使用'this.componentDidMount'作爲事件回調:)你應該創建自己的函數來處理在父組件中的'rerender .. ..當然，它不會有機會，因爲當父組件掛載狀態將是'content：changed！'，當你處理點擊它會調用相同的功能，所以狀態將是相同的。 – Hardy

componentDidMount()是組件完成渲染時調用的生命週期函數。

調用它看起來像是在規避整個重新渲染過程。

您應該改爲創建自己的功能。

changeContent: function() { 
     this.setState({content: 'changed!'}); 
    },

再經過changeContent()到rerender。

通常，避免傳遞React的LifeCycle方法！

來源

2016-08-22 22:40:45 Cent

爲了解決所有這些問題，Facebook上的傢伙提出了單向數據流模式。你的孩子組件不應該知道父母，而應該改變某種狀態（Flux，Redux，Reflux）。對狀態的更改將觸發父組件的重新渲染。

來源

2016-08-22 22:59:22

從子組件中更新父組件

回答

相關問題