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

巴特西

React 之React.createContext

最新文章

热门文章