到目前为止,我找到的所有文档和博客文章都只处理单个[value, setValue]对的情况。在我的情况下,我需要使用useContext钩子向Provider传递多个[value, setValue]变量对。
以下是我在CodePen中设置的典型示例: https://codepen.io/nardove/pen/XWrZRoE?editors=0011
const App = () => {
return(
<div>
<MyProvider>
<ComponentA />
</MyProvider>
</div>
);
}
const MyContext = React.createContext();
const MyProvider = (props) => {
const [value, setValue] = React.useState("foo");
return(
<MyContext.Provider value={[value, setValue]}>
{props.children}
</MyContext.Provider>
);
}
const ComponentA = () => {
const [value, setValue] = React.useContext(MyContext);
return(
<div>
<h1>
The value is: {value}
</h1>
</div>
);
}
ReactDOM.render(<App /> , document.getElementById('app'));
如果您有任何关于如何将多个[value, setValue]对传递给Provider的想法,或者有其他解决我的问题的替代方法,将不胜感激
useReducer
而不是useState
。 - Andy