刷新的孩子来自父母React

Question

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

我想要的是有一个"全部检查"功能的复选框(左上角的复选框).事情是我不知道如何解决这个因为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但这只是暂时的.

我遇到的问题是:当我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

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

在儿童中：

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

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

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