时间戳

首页 > 解决方案 > 反应 | 多语境 | 无法使用默认值

javascript - 反应 | 多语境 | 无法使用默认值

问题描述

我正在尝试在 React 16.4 中发布的新上下文 API。当我使用多个上下文时，我被卡住了，无法使用 Providers 的默认值，但是在 Single Contexts 的情况下，消费者能够接收 Providers 的默认值。

语境 ：

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

谢谢。

标签： javascriptreactjs

解决方案

根据反应文档：

仅当 a在树中没有匹配项defaultValue时才使用该参数。ConsumerProvider

// 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>

推荐阅读