我正在尝试在React 16.4中发布新的上下文API。当我使用多个上下文时,我陷入困境,无法使用提供者的默认值,但是在单上下文的情况下,消费者能够接收提供者的默认值。
背景:
const ThemeContext = React.createContext("light");
const UserContext = React.createContext({ name: "Guest" });`
供应商
<ThemeContext.Provider>
<UserContext.Provider>
<Main />
</UserContext.Provider>
</ThemeContext.Provider>
消费者:
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => <ProfilePage user={user} theme={theme} />}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
请找到沙箱链接:https://codesandbox.io/s/6w8qn7yy4k
谢谢。
根据React文档:
defaultValue
参数仅在Consumer
使用时,它在树上没有匹配的Provider
。
// context
const ThemeContext = React.createContext("light");
const UserContext = React.createContext({ name: "Guest" });
function Content() {
return (
<ThemeContext.Consumer>
{theme => <ProfilePage theme={theme} />}
</ThemeContext.Consumer>
);
}
class App extends React.Component {
render() {
return (
<UserContext.Provider>
<Main />
</UserContext.Provider>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
上面的代码没有ThemeContext的提供程序,因此它采用默认值。
如果您同时使用这两个提供商,则需要向所有提供商提供价值
<ThemeContext.Provider value={"light"}>
<UserContext.Provider value={{ name: "Guest" }}>
<Main />
</UserContext.Provider>
</ThemeContext.Provider>
如果渲染树中没有匹配的createContext()
组件,则<Provider/>
调用中传递的默认值将仅提供给使用者。
在CodeSandBox示例中,<App />
组件呈现两个<Provider />
组件,但不传递value
prop,这会导致未定义的值。
我更新了你的CodeSandBox只渲染<Content />
组件。请注意默认值现在如何工作:) https://codesandbox.io/s/j207ollx89