从父 React 刷新子状态

Question

我有一个包含一些数据的 table，table 中的每个元素都是一个 React class 组件。它看起来像这样：

我只想为 "check all" 功能设置一个复选框（左上角的复选框）。问题是我不知道如何解决这个问题，因为 props 和 state.

我在单元素组件中有这样的代码：

getInitialState: function() {
    return { component: this.props.data };
  },

render: function() {
    var data = this.state.component;
    data = data.set('checked', this.props.data.get('checked'));
    ...
}

而且我知道我不应该从 props 获取 checked 参数，但这只是暂时的。

我遇到的问题是：当我更新父项中的 checked 参数时，它不会更新状态，因为 getInitialState 在刷新后没有被调用（是的，我知道它应该是像那样）。

我的问题是：我能以某种方式更新子组件的状态吗？ 或者这是更好的实现方式。

Answer 1

我的方法是你应该在 parent 的渲染中有这样的结构：

<ParentView>
{ this.props.rows.map(function(row) {
    <ChildRow props={row.props} />
  }).bind(this)
}
</ParentView>

然后在 row.props 上，您将获得当前行项目是否被选中的信息。当 parent 复选框被切换时，您将使用状态填充所有 row.props。

在 child，您将收到带有 componentWillReceiveProps 的那些，当复选框被切换时，您会施展魔法（例如设置正确的状态）：

componentWillReceiveProps: function(props) {
  this.setState({isChecked: props.isChecked});
}

（来自 React 文档的信息：在此函数中调用 this.setState() 不会触发额外的渲染。）

Child 元素的渲染类似于：

<div>
  <input type='checkbox' checked={this.state.isChecked} />
  <label>{this.props.label}</label>
</div>

Answer 2

您可以通过仅将所有 child 元素的选中状态存储在 parent 中来解决此问题。 children 仅根据 props 设置他们的检查状态（他们不为此使用状态）并调用 parent 提供的回调来更改此设置。

例如，在 child:

render: function() {
    //... not showing other components...
        <input type="checkbox"
               value={this.props.value}
               checked={this.props.checked}
               onClick={this.props.onClick}>
}

parent 提供 onClick，它在 child 的状态下更改 child 的检查状态，并在 re-renders 时将其传回 child =].

在parent中：

getInitialState: function() {
    return {
        allChecked: false,
        childrenChecked: new Array(NUM_CHILDREN) // initialise this somewhere (from props?)
    }
},

render: function() {
    return <div>
               <input type="checkbox" checked={this.state.allChecked}>
               {children.map(function(child, i) {
                   return <Child checked={this.state.childrenChecked[i]}
                                 onClick={function(index) {
                                     return function() {
                                         // update this.state.allChecked and this.state.childrenChecked[index]
                                     }.bind(this)
                                 }.bind(this)(i)}
                          />
                }).bind(this)}
           </div>;
}

-- 未检查拼写错误等

Answer 3

请参阅 react documentation 提升状态。在您的子组件中，您需要使用道具。要更新道具，您需要提供来自父级的更新功能。

Answer 4

含功能组件： 当 parent 提供的 props 发生变化时，刷新 children 内部状态的一种简单方法是通过 useEffect():

在children中：

const [data, setData] = useState(props.data);

useEffect( () => {
    setData(props.data);
}, [props.data]);

这样，每次 props.data 更改时，都会触发 useEffect 并强制为某些数据设置新状态，因此组件会“刷新”。

从父 React 刷新子状态

Refreshing children state from parent React

javascript

reactjs

refluxjs