React-12 Context的使用

当最外层父组件需要给最底层子组件传递数据时，按照react中组件通信方式，需要使用props一层层组件向下传递，当组件层次较多时，会比较繁琐；

      这时我们可以使用Context，Context作用就是跨组件传递数据；

使用步骤：

1. 调用React.createContext() 创建Provider(用来提供数据) 和 Consumer(用来消费数据) 两个组件；

const {Provider,Consumer} = React.createContext();

2. 使用Provider组件作为父节点包裹我们的应用（根组件）；

3. 设置value属性，表示要传递的数据；

<Provider value='name'>
    <div>
        <Child></Child>
    </div>
</Provider>

4. 调用 Consumer组件接收数据；

<Consumer>
   {(data)=>{return  <span>data参数表示接收到的数据---{data}}</span>}
</Consumer>

小案例如下：

index.js:

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

// 创建Context
const {Provider,Consumer} = React.createContext();

class App extends React.Component{
    state={
        name:'张三'
    }
    render(){
        return(
            <Provider value={this.state.name}>
                <div className='app'>
                    App
                    <Node />
                </div>
            </Provider>
            
        )
    }
}

class Node extends React.Component{
    render(){
        return (
            <div className='node'>
                Node
                <SubNode />
            </div>
        )
    }
}

class SubNode extends React.Component{
    render(){
        return (
            <div className='subNode'>
                SubNode
                <Child />
            </div>
        )
    }
}

class Child extends React.Component{
    render(){
        return (
            <div className='child'>
                我是最底层子组件 Child  
                <Consumer>
                    {(data)=>{return <span>  Context传递过来的数据为: {data}</span>}}
                </Consumer>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

index.css:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.app{
  background-color: rgb(240, 26, 61);
  padding: 10px;
}

.node{
  background-color: rgb(247, 69, 99);
  padding: 10px;

}
.subNode{
  padding: 10px;
  background-color: rgb(252, 160, 175);
}
.child{
  padding: 10px;
  background-color: rgb(247, 204, 209);
}