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

【问题标题】：React Context API - can children/consumers request that the provider change a value?React Context API - 孩子/消费者可以请求提供者更改值吗？
【发布时间】：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 接收请求并进行相应更新的事情。

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

【问题讨论】：

我正在尝试让下游消费者向供应商发送回请求以更改内容 - 是的，它就是这样工作的。
谢谢，知道我并没有试图强迫系统以不同于其设计的方式工作

标签： javascript reactjs react-context

【解决方案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 已在上面回答。