React 之React.createContext

使用Context,能夠跨越組件進行數據傳遞react

 

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

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

 

經過靜態方法React.createContext()建立一個Context對象,這個Context對象包含兩個組件,<Provider /><Consumer />dom

 

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

<Provider />value至關於如今的getChildContext()ide

 

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

相關文章
相關標籤/搜索