ReactJS - 當單獨的類屬性更改

Question

在我的項目我有一些的HTML文檔更新成分發生化學反應的代碼，例如：

var Test = React.createClass({ 
    getInitialState: function() { 
    return {storage: this.props.storage}; 
    }, 
    render: function() { 
    return (
     <h2> 
     {this.state.storage} 
     </h2> 
    ); 
    } 
}); 

在另一類，APPMAN，我有一個名爲storageLeft屬性。如果我喜歡渲染測試部分：

<Test storage={AppMan.storageLeft}/> 

什麼是去更新Test組件每當storageLeft是APPMAN類中改變了正確的方法是什麼？我不確定是否將它作爲組件的屬性傳遞是正確的。最初，我所能想到的是做一個setInterval並不斷地做this.setState({storage: AppMan.storageLeft});或沿着這些線。任何更好的想法？

Answer 1

通過道具設置狀態是anti-pattern。您應該在AppMan組件的狀態下保存storageLeft，然後將該狀態作爲道具傳遞給測試組件。當您更改其狀態時，組件會自動重新呈現自己及其子項（如果需要）。

的docs狀態：

要實現互動，我們引入可變狀態到 組件。 this.state對組件是私有的，可以通過調用this.setState（）來更改 。當狀態更新時，組件 重新呈現自身。

這樣，當您將狀態作爲道具傳遞時，組件將保持同步。

AppMan.js

<Test storage={this.state.storageLeft} /> 

Test.js

var Test = React.createClass({ 
    render: function() { 
    return (
     <h2> 
     {this.props.storage} 
     </h2> 
    ); 
    } 
});