如何维护可排序容器子组件的状态？

Question

如下面的代码所示，App 组件有一个状态。这个状态的属性通过 props 传递给子组件。但是一旦 App 组件中的状态发生变化，Sortable 组件中的 Child 组件就不会更新。但是这个 Sortable 容器之外的子组件照常更新（重新渲染）。

如何实现这些可排序的子组件在每次状态更改时呈现？

这是代码（简化版）：

App.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: 从 'react';

导入 React

export default class Child extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<p>{this.props.text}</p>)
    }
}

页面加载后的样子：

... 状态更新后：

Answer 1

看起来 Sortable 组件覆盖了 shouldComponentUpdate here:

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 的状态发生变化时，您会希望传递这样的方法来确定要做什么（如果有的话）。

如何维护可排序容器子组件的状态？

How to maintain state of child components of Sortable container?

javascript

sortables

reactjs