反应|多个上下文|无法使用默认值

Question

我正在尝试在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

谢谢。

Answer 1

根据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>

Answer 2

如果渲染树中没有匹配的createContext()组件，则<Provider/>调用中传递的默认值将仅提供给使用者。

在CodeSandBox示例中，<App />组件呈现两个<Provider />组件，但不传递value prop，这会导致未定义的值。

我更新了你的CodeSandBox只渲染<Content />组件。请注意默认值现在如何工作:) https://codesandbox.io/s/j207ollx89