React Context API - 孩子/消费者可以请求提供者更改值吗？

Posted 2023-04-14

【中文标题】React Context API - 孩子/消费者可以请求提供者更改值吗？

【英文标题】：React Context API - can children/consumers request that the provider change a value?

【发布时间】：2019-06-03 06:31:57

【问题描述】：

我之前使用过 Redux，这次很想实现 Context API。我非常想做React Context API - How to Get Reference To State Object In Provider For A Conditional Method 中描述的事情——但是，我希望“更改”功能更通用——它最初看起来像这样：

class ProviderComp extends Component
    state=
        name: "Gary",
        age: 20,
        color: "Red",
        changeMind: ()=>
            if(this.state.color === "Red")
                this.setState(
                    name: "Tony",
                    age: 35,
                    color: "Blue"
                )
            
            if(this.state.color === "Blue")
                this.setState(
                    name: "Gary",
                    age: 20,
                    color: "Red"
                )
            
        
    

但不是“changeMind()”，我想要 change(prop, val) 以便调用：

change("name","Bob")

将 state.name 更改为 Bob

change("age", 30)

将 state.age 更改为 30 等

这可能吗？我正在尝试做一些类似于 Redux 中的子级发送更改请求，而父级 reducer 接收请求并进行相应更新的事情。

我可能错误地考虑了上下文，因为我不只是提供上游然后消费下游，我试图让下游消费者将请求发送回提供者以改变事物 - 非常愿意接受教育更好的思考方式！

【问题讨论】：

我正在尝试让下游消费者向供应商发送回请求以更改内容 - 是的，它就是这样工作的。

谢谢，知道我并没有试图强迫系统以不同于其设计的方式工作

【参考方案1】：

为了改变提供者的价值，<Provider> 应该被重新渲染。所以这是关于制作一个托管提供程序的组件来存储和更新状态：

class ProviderComp extends Component 
  state = 
    change: (key, val) => this.setState( [key]: val ),
    ...
  ;

  render() 
    return <SomeContext.Provider value=this.state>...</SomeContext.Provider>
  

【参考方案2】：

是的，只需将更改函数也传递给上下文值。 在包含上下文提供程序的组件中

changeMind = mind => this.setState(mind)

render() 
  <Context.Provider value=mind : this.state.mind, changeMind : this.changeMind>
  </Context.Provider>

然后在有consumer的组件中，调用context.changeMind会触发provider的值发生变化，例如

<Context.Consumer>

  contextValue => (<button onClick=contextValue.changeMind>Change</button>)

</Context.Consumer>

【讨论】：

谢谢，这是我链接的原始帖子，但我问的是如何概括“更改”功能，@estus 已在上面回答。