ReactJS組件的使用道具或國家決策呈現

我有一個孩子組件表需要每次都被渲染其狀態的變化，而且，有時，當新道具從父到達;ReactJS組件的使用道具或國家決策呈現

表組件應該是可重用並處理其自己的狀態。當它的寬度發生變化時，我使用setState（newTableWidth）來重新渲染表格（目前爲止，效果很好）。

父應用程序項目是創建表組件並傳遞初始寬度的項目。

問題： 當在父應用程序的改變（或者在不同的子組件），我要更新的props.tableWidth和重新渲染表。但還有其他場景，其中項目呈現表而不更新props.tableWidth。

表怎麼能知道何時使用道具呈現自身以及何時使用狀態呈現自身？

代碼示例：

class Table extends React.Component { 
    constructor(props) { 
     this.state = { 
      tableWidth: this.props.tableWidth 
      columnOrder 
     }; 
    } 
    onWidthChange(newWidth){ 
    this.setState({tableWidth:newWidth}) 
    } 

} 

class Project extends React.Component { 
render(){ 
    if (this.onChangeTableWidth()){ 
     let width = this.calculateTableWidth(); 
    } 
    <Table tableWidth = {width}/> 
} 
}

來源

2017-02-15 Adi.H

陣營會自動當道具或狀態的變化，重新渲染，所以你不必擔心。您可以使用componentWillReceiveProps(nextProps)生命週期方法通過道具收到的新寬度更新您的狀態，只需使用setState(...)即可。

來源

2017-02-15 15:48:55

但是如果道具沒有變化，但是我希望_Table_使用道具而不是狀態呢？例如：我渲染_Table_道具：tableWidth = 100 現在_Table_改變了他的狀態，以tableWidth = 200 現在_Project_組件觸發onChangeTableWidth（），並需要與tableWidth再次重新渲染_Table_ = 100 在這種情況下，道具沒有改變，所以我的tableWidth將是200而不是100 –

我會說，只讓容器（父）組件負責改變tableWidth，例如通過道具傳遞一個函數，它將作爲'onChangeTableWidth（width）處理程序，並在容器中保留寬度，或者至少始終傳遞通過函數參數獲得的寬度。通過這種方式，只有一個真相源，它是容器組件，並且永遠不會混淆寬度的設置方式，因爲它仍然以相同的方式更新。然而，正如已經提到的人，你也可以使用一些國家管理機制，我建議你看看redux或mobx。 –

如果父組件決定將新道具過濾到子組件，則子組件必須顯示。如果道具和國家之間有衝突，只需道具贏，國家需要重置。我想，一個全局狀態解決了這個問題，但我從你的問題中瞭解到，你在子組件中封裝了一些狀態。因此，如果父組件想要帶有包含維持當前子組件的道具的道具，它可以詢問子組件並重新塑造道具。

來源

2017-02-16 08:14:56 Shula

ReactJS組件的使用道具或國家決策呈現

回答

相關問題