javascript - ReactJS 组件决定使用 props 还是 state 来渲染

Question

我有一个子组件Table，每次其状态发生变化时都需要渲染，而且有时当新的 Prop 从父组件到达时也需要渲染；

Table 组件应该是可重用的并处理其自己的状态。当其宽度发生变化时，我使用 setState(newTableWidth) 重新渲染表格(到目前为止，效果很好)。

父应用程序Project是创建Table组件并传递初始宽度的应用程序。

问题:当父应用程序(或不同的子组件)发生更改时，我想更新 props.tableWidth 并重新渲染Table。但在其他情况下，Project 会在不更新 props.tableWidth 的情况下渲染 Table。

Table 如何知道何时使用 props 渲染自身以及何时使用 state 渲染自身？

代码示例:

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}/>
 }
}

Answer 1

如果父组件决定将新的 props 传递给子组件，子组件必须服从。如果 props 和 state 之间存在冲突，只需 props 获胜并且 state 需要重置。我猜想一个全局状态可以解决这个问题，但我从你的问题中了解到，你将一些状态封装在子组件中。据此，如果父组件想要引入包含维护当前子组件的 props 的 props，它可能会询问子组件并 reshape props。