javascript 基地：https：//reactjs.org/docs/context.html#why-not-to-use-context

Posted 2021-05-04

// createContextでコンテキストを生成。`light`がデフォルト値
const ThemeContext = React.createContext('light');

// ユーザー情報のContext
const UserContext = React.createContext();

// Contextどっちも使うパターン
function Toolbar(props) {
  return (
    {/*　初見だとちょっとギョッとするかもしれないが、childrenにfunction渡してるパターン。callbackの値として、themeが返ってくる */}
    <ThemeContext.Consumer>
      {theme => (
       {/* ThemeのなかでUser使いたかったらこんな感じ */
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;
    // Provier側。valueで値を渡している
    return (      
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Toolbar />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}