Javascript React上下文API-子级/使用者能否请求提供者更改值?
我以前使用过Redux,这次我热衷于实现上下文API。我非常想做中描述的事情-但是,我希望“更改”功能更通用-它最初看起来像这样:Javascript React上下文API-子级/使用者能否请求提供者更改值?,javascript,reactjs,react-context,Javascript,Reactjs,React Context,我以前使用过Redux,这次我热衷于实现上下文API。我非常想做中描述的事情-但是,我希望“更改”功能更通用-它最初看起来像这样: class ProviderComp extends Component{ state={ name: "Gary", age: 20, color: "Red", changeMind: ()=>{ if(this.state.color === "Red"){
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"
})
}
}
}
但我希望更改(prop,val),而不是“changeMind()”,以便调用:
change("name","Bob")
将state.name更改为Bob
change("age", 30)
将状态、年龄更改为30岁等
这可能吗?我正在尝试做一些类似于Redux中的一个孩子发送一个更改请求,而一个父reducer接收请求并相应地更新
我可能对上下文的想法是错误的,因为我不只是提供上游然后消费下游,我正试图让下游消费者向proivder发回更改内容的请求-非常愿意接受更好的思考方式的教育 要更改提供程序值,应重新呈现
。因此,这是关于制作承载提供程序的组件来存储和更新状态:
class ProviderComp extends Component {
state = {
change: (key, val) => this.setState({ [key]: val }),
...
};
render() {
return <SomeContext.Provider value={this.state}>...</SomeContext.Provider>
}
}
类ProviderComp扩展组件{
状态={
change:(key,val)=>this.setState({[key]:val}),
...
};
render(){
返回。。。
}
}
是,只需将change函数也传递到上下文值中即可。
在包含上下文提供程序的组件中
changeMind = mind => this.setState({mind})
render() {
<Context.Provider value={{mind : this.state.mind, changeMind : this.changeMind}}>
</Context.Provider>
}
我正试图让下游消费者向proivder发回更改内容的请求-是的,这就是它的工作原理。谢谢,知道我没有试图强迫一个系统以不同于为汉克斯设计的方式工作很有用,这是我链接的原始帖子,但我问的是如何推广“更改”功能,@estus已经回答了上面的问题。
<Context.Consumer>
{
contextValue => (<button onClick={contextValue.changeMind}>Change</button>)
}
</Context.Consumer>