在componentWillReceiveProps中反应默认属性覆盖状态更改

Question

我在Child组件中有一个名为fullWindow的state属性，该属性可以在代码中的其他位置（例如updateFullWindow 。

子组件：

static get defaultProps(){
    return {
        fullWindow: false
    }
}
updateFullWindow = (value) => {
    this.setState({fullWindow: value});
}
componentWillReceiveProps(nextProps) {
    this.setState({fullWindow: nextProps.fullWindow});
}

我还有一个Parent组件，可以更新fullWindow和其他状态属性。

父组件：

fullScreenCallback = () => {
    this.setState({hideDetails: false});
}
clickCallback = () => {
    this.setState({fullWindow: true}));
} 
render() {
    return (
        <div>
            <div onClick={this.clickCallback}>Click Me</div>
            <Child {...this.state}/>
        </div>
    );
}

我fullWindow的问题是componentWillReceiveProps函数fullWindow Child状态的fullWindow属性设置回在defaultProps中设置的prop默认值，并覆盖updateFullWindow()的setState 。 这是因为fullWindow道具被传递给nextProps当其他国家在父得到更新。

基本上我只希望孩子状态fullWindow更改为nextProps当clickCallback已运行并明确改变了fullWindow财产。

最好的方法是什么？

Answer 1

因此，如果我这样正确地阅读此内容，则您的子组件中可能会有内容

toggleFull() {
    this.setState({fullscreen: !this.state.fullscreen})
}

render() {
  const shouldFull = (this.state.fullscreen != null && this.state.fullscreen)
    || this.props.fullscreen
  return shouldFull ?
    <FullScreen /> : <NotFullScreen />
}

如果将状态设置为全屏，则将state.fullscreen设置为全屏，但是如果未设置state.fullscreen，它将使用this.props.fullscreen。

同样， this.props.fullscreen基本上将默认为false ，因为undefined将为false 。

另外，对一个onClick事件使用toggleFull函数，我只是不愿意写出来。

然后，在您的父组件中，执行以下操作

<Child fullscreen={this.state.fullscreen} />

Answer 2

最后实际起作用的是删除setStates，而是从父级传递一个函数来更新父级状态并在子组件中调用它。 这样，您始终可以保证该值是最新的，即，父母对道具所做的更改不会覆盖您的孩子的状态，反之亦然。

例如：

父组件：

updateOptions = (newOptions) => {
    this.setState({options: newOptions});
}
render() {
    return (
        <div>
            <div onClick={this.clickCallback}>Click Me</div>
            <Child {...this.state} updateOptions={this.updateOptions}/>
        </div>
    );
}

子组件：

updateFullWindow = (value) => {
    this.props.updateOptions({fullWindow: value});
}

//Remove the componentWillReceiveProps

有关此模式的更多信息，请参见此处： https : //discuss.reactjs.org/t/is-this-a-decent-pattern-to-update-parent-state-from-children/560