使用React Context进行状态管理（五）Provider与Consumer匹配

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

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

const ColorContext = React.createContext();

const MyButton = props => (
  
    {color => (
      
        使劲按我
      
    )}
  
);

ReactDOM.render(

  
  
    
  
  
    
  
  
    
  
, 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 => (
  
    {color => {
      if (typeof color === 'undefined') {
        throw Error('哥们， 你得用Provider啊！');
      }
      return (
        使劲按我
      );
    }}
  
);

ReactDOM.render(

  
  
    
  
  
    
  
  
    
  
, document.getElementById('root'));

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

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