react context introduce

Posted on

Provider

1
2
3
4
5
6
7
8
9
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

Provider 只接收一个 props 为 value 的值

两种用法

1，static contextType

1
2
3
4
5
6
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

2，Context.Consumer function as children

1
2
3
4
5
<MyContext.Consumer>
  {value => {
   return <input value={value} />;
  }}
</MyContext.Consumer>