React 之React.createContext

使用Context，可以跨越組件進行數據傳遞

 

import React from 'react';
import ReactDOM from 'react-dom';

const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

 

通過靜態方法React.createContext()創建一個Context對象，這個Context對象包含兩個組件，<Provider />和<Consumer />。

 

class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
      </ThemeContext.Provider>
    );
  }
}

<Provider />的value相當於現在的getChildContext()。

 

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}
 
class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

<Consumer />的children必須是一個函數，通過函數的參數獲取<Provider />提供的Context

 

參考自：https://www.jianshu.com/p/eba2b76b290b