如何维护Sortable容器的子组件的状态？

Question

如下面的代码所示，App 组件有一个状态。这个状态的属性通过 props 传递给子组件。但是一旦 App 组件中的状态发生变化，Sortable 组件内的子组件就不会更新。但是这个 Sortable 容器之外的子组件会像往常一样更新（重新渲染）。如何在每次状态更改时呈现这些可排序的子组件？这是代码（简化）：应用程序.js：import Sortable from 'react-sortablejs';import Child from './Child';class App extends React.Component {  constructor(props) {    super(props);    this.state = {      text1: "Text1",      text2: "Text2"    }  }  render() {    return (      <div className="App">        <Sortable>          <Child text={this.state.text1} />          <Child text={this.state.text2} />        </Sortable>        <Child text={this.state.text1} />      </div>    );  }}Child.js：从“反应”导入反应；export default class Child extends React.Component {    constructor(props) {        super(props);    }    render() {        return (<p>{this.props.text}</p>)    }}页面加载时的样子：...在状态更新后：

Answer 1

看起来Sortable组件shouldComponentUpdate 在这里覆盖：

shouldComponentUpdate(nextProps) {

    // If onChange is null, it is an UnControlled component

    // Don't let React re-render it by setting return to false

    if (!nextProps.onChange) {

         return false;

    }

    return true;

}

基本上，它设置为仅在有onChange处理程序时才更改。您希望传递这样的方法来确定当状态发生App变化时要做什么（如果有的话）。