Question

我以前使用过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)

将状态更改为30等

这可能吗？我正在尝试做类似于Redux中的一个孩子的事情，该孩子分派了一个更改请求，而一个父级reducer接收了该请求并相应地进行了更新。

我可能对Context的想法是错误的，因为我不仅在上游提供商品，然后在下游消费，我试图让下游消费者将请求发送回提供者以更改事物-非常容易接受教育更好的思考方式！

Answer 1

为了更改提供者的价值，应重新呈现<Provider>。因此，这是关于制作一个托管提供程序的组件来存储和更新状态：

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

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

Answer 2

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

requests.session()

然后在具有使用方的组件中，可以调用changeMind = mind => this.setState({mind}) render() { <Context.Provider value={{mind : this.state.mind, changeMind : this.changeMind}}> </Context.Provider> }，这将触发提供者值的更改，例如

context.changeMind

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

2 个答案: