如何维护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) {&nbsp; &nbsp; // If onChange is null, it is an UnControlled component&nbsp; &nbsp; // Don't let React re-render it by setting return to false&nbsp; &nbsp; if (!nextProps.onChange) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return false;&nbsp; &nbsp; }&nbsp; &nbsp; return true;}基本上，它设置为仅在有onChange处理程序时才更改。您希望传递这样的方法来确定当状态发生App变化时要做什么（如果有的话）。