这就是我如何访问react context提供的值
这是提供程序:
import React from 'react';
import Provider from './Provider';
ReactDOM.render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
这是索引js文件:
import Provider from './Provider';
ReactDOM.render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
这就是我从上下文提供程序获取值的方法
import { Context } from './Provider';
<div className="App">
<Context.Consumer>
{(value) => {
return <div>{value.state.name}</div>;
}}
</Context.Consumer>
</div>
现在我想将state.name更改为一个新值。 我怎样才能做到这一点呢？
您只能通过提供程序来实现。
通常，您在提供程序的值中传递一个setter函数。
<Context.Provider value={{ value, setValue}} />
下面是一个具有Provider模式的示例（与问题示例类似）:
class Consumer extends React.Component {
render() {
return (
<Context.Consumer>
{({ value, set }) => {
return (
<>
{value}
<button
onClick={() => {
set(value + 1);
}}
>
Count
</button>
</>
);
}}
</Context.Consumer>
);
}
}
class App extends React.Component {
state = {
value: 0
};
render() {
return (
<Context.Provider
value={{
value: this.state.value,
set: value => this.setState({ value })
}}
>
<Consumer />
</Context.Provider>
);
}
}
您必须从上下文中提供一个方法来更新状态。 这通常是通过创建一个自定义的“提供者”组件来完成的。
例如:
const MyContext = React.createContext();
const Provider = ({ children }) => {
const [ value, updateContext ] = useState();
return <MyContext.Provider value={{ value, updateContext }}>
{children}
</MyContext.Provider>
}
然后在组件内部，可以使用UpdateContext方法更新状态。
const { value, updateContext } = useContext(MyContext);
// Update the context
updateContext(10);
