如何提升国家两级反应？

Question

在React之后like here。

我希望能够提升两个级别的状态。意思是，当事件发生在较低级别的组件时，我希望它影响状态两级。我该怎么做？这甚至是推荐的吗？

例如，组件A是组件B的父组件，组件B是组件C的父组件.A - ＆gt; B - ＆gt; C.

在A中，

handleChange = (e) => {console.log(e)}
<B onChange={handleChange}/>

在B中，

handleChange = (e) => this.props.onChange(e)
<C onChange={this.handleChange}/>

在C中，

handleChange = (e) => this.props.onChange(e)
<button onClick={this.handleChange}></button>

有更好的方法吗？

Answer 1

在此处使用您的示例A-＆gt; B-＆gt; C. 你应该在A。

中创建一个setter

A的状态：

this.state={ stateA: "whatever"}

在A：

中的功能

setStateA(newVal){
    this.setState({stateA: newVal});
}

现在将其作为属性传递给B

<B setStateA={this.setStateA} />

在B：

<C setStateA={this.props.setStateA} />

在C：

// some code
this.props.setStateA("a new value");
//some code

我认为这是最好的方法。将功能作为财产传递给儿童。希望它有所帮助。

Answer 2

您不需要在B组件中重新创建该功能，只需将其传递即可。

B只是看起来像

<C onChange={this.props.onChange}/>

对于C，您可以直接将道具附加到onClick上。