从父母React

Question

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

我想要的只有一个复选框，用于＆＃34;检查全部＆＃34;功能（左上角的复选框）。问题是由于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'));
    ...
}

我知道我不应该从checked获得props param，但这只是暂时的。

我遇到的问题是：当我在父级更新checked param时，它不会更新状态，因为刷新后没有调用getInitialState（是的，我知道它应该是这样的。）

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

Answer 1

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

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

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

在孩子身上，你会收到componentWillReceiveProps的那些人，当你切换复选框时，你会做出魔法（例如设置正确的状态）：

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

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

子元素的渲染类似于：

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

Answer 2

您可以通过仅在父项中存储所有子元素的已检查状态来解决此问题。孩子们只根据道具设置他们的检查状态（他们不会使用状态）并调用父母提供的回调来改变它。

，例如，在孩子身上：

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

父级提供onClick，它会更改状态中子项的已检查状态，并在重新呈现时将其传递给子项。

在父母：

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。 在您的子组件中，您需要使用道具。要更新prop，您需要提供父级的更新功能。

Answer 4

具有功能组件： 当父母变更提供的道具时，一种简单的刷新孩子内部状态的方法是通过useEffect()：

在孩子们中：

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

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

通过这种方式，每次props.data更改useEffect都会被触发并强制为某些数据设置新状态，因此组件将“刷新”。