Question

我有一个子组件 Table 需要在每次状态发生变化时进行渲染，而且有时，当新的道具从父级到达时;

Table 组件应该可以重复使用并处理自己的状态。当它的宽度改变时，我使用setState（newTableWidth）重新渲染表（到目前为止，这么好）。

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

问题： 在父应用程序（或不同的子组件）中进行更改时，我想更新props.tableWidth并重新呈现表。但是还有其他情况，其中 Project 呈现表而不更新props.tableWidth。

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

代码示例：

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

如果父组件决定将新道具传递给子组件，则子组件必须遵守。如果道具和州之间存在冲突，只需道具胜利，州需要重置。我想一个全局状态就是解决了这个问题，但我从你的问题中了解到你将一些状态封装在子组件中。据此，如果父组件想要带来包含维护当前子组件的道具的道具，它可以询问子组件并重塑道具。

Answer 2

当道具或状态发生变化时，React会自动重新渲染，因此您不必担心。您可以使用componentWillReceiveProps(nextProps)生命周期方法通过道具收到新的宽度来更新您的状态，只需使用setState(...)即可。

ReactJS组件决定使用props或state进行渲染

2 个答案: