使用React Context进行状态管理（五）Provider

首先创建一个Context，这个Context用来提供颜色变量供子组件使用，然后创建一个Button组件，使用Context提供的颜色变量来设置它的颜色。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

const ColorContext = React.createContext();

const MyButton = props => (
  <ColorContext.Consumer>
    {color => (
      <button className={`${color}`} {...props}>
        使劲按我
      </button>
    )}
  </ColorContext.Consumer >
);

ReactDOM.render(<div>
  <MyButton></MyButton>
  <ColorContext.Provider value="red">
    <MyButton></MyButton>
  </ColorContext.Provider>
  <ColorContext.Provider value="blue">
    <MyButton></MyButton>
  </ColorContext.Provider>
  <ColorContext.Provider value="yellow">
    <MyButton></MyButton>
  </ColorContext.Provider>
</div>, document.getElementById('root'));

我们看到一共渲染了4个Button，只有第一个Button没有使用Provider，会出错吗？不会。那第一个Button的className是什么？如下图所示，undefined。

怎么解决？React.createContext函数是可以传入默认值的。

const ColorContext = React.createContext('black');

在没有使用Provider的地方就使用默认值。但如果我们想让使用组件的人必须用Provider提供一个值呢，不提供就报错！

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

const ColorContext = React.createContext();

const MyButton = props => (
  <ColorContext.Consumer>
    {color => {
      if (typeof color === 'undefined') {
        throw Error('哥们， 你得用Provider啊！');
      }
      return (<button className={`${color}`} {...props}>
        使劲按我
      </button>);
    }}
  </ColorContext.Consumer >
);

ReactDOM.render(<div>
  <MyButton></MyButton>
  <ColorContext.Provider value="red">
    <MyButton></MyButton>
  </ColorContext.Provider>
  <ColorContext.Provider value="blue">
    <MyButton></MyButton>
  </ColorContext.Provider>
  <ColorContext.Provider value="yellow">
    <MyButton></MyButton>
  </ColorContext.Provider>
</div>, document.getElementById('root'));

现在这个程序会报错，因为第一个button没有使用Provider，想让它正常运行的话，要么删了第一个button，要么就给它加上Provider。

下一次我们继续完善我们之前的Message应用。