javascript - react |多上下文 |无法使用默认值

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 文档:

The defaultValue argument is only used by a Consumer when it does not have a matching Provider above it in the tree.

// 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 的提供者，因此它采用默认值。

如果您同时使用这两个提供程序，则需要向所有提供程序提供值(value)，例如

<ThemeContext.Provider value={"light"}>
    <UserContext.Provider value={{ name: "Guest" }}>
      <Main />
    </UserContext.Provider>
 </ThemeContext.Provider>