React 之React.createContext

时间 2019-11-08

标签 react react.createcontext createcontext 栏目 React 繁體版

原文原文链接

使用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