Question

我在名为Child的{{1}}组件中有一个州属性，可以在代码中的其他位置更新自己，例如fullWindow。

子组件：

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> ); }函数正在将componentWillReceiveProps状态的fullWindow属性设置回Child中设置的prop默认值并且覆盖defaultProps中的setState。这是因为当其他状态在父级中更新时，updateFullWindow()道具将传递给fullWindow。

基本上我只希望子状态nextProps在运行fullWindow时更改为nextProps并明确更改clickCallback属性。

最好的方法是什么？

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尚未设置，它将使用this.props.fullscreen。

此外，this.props.fullscreen基本上默认为false，因为未定义的内容为false。

另外，对toggleFull事件使用onClick函数，我刚才没有写出来。

然后，在您的父组件中，执行类似这样的操作

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

Answer 2

最终实际工作的是删除setStates，而是从更新父节点状态的父节点传递一个函数，并在子组件中调用它。通过这种方式，您可以始终保证该值是最新的，即父道具更改不会覆盖您的子状态，反之亦然。

E.G：

父组件：

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

在componentWillReceiveProps中反应默认支持覆盖状态更改

2 个答案: