context基本使用

1.context.js

作为文件之间传递的一个中间的文件，可以简单的理解为交互的文件

先要生成一个context 并且导出供组件使用

import react from 'react'
​
const Context = react.createContext()
​
export default Context;

2.父组件

• 在父组件中导入创建好的context.js

• 给需要数据的子组件用<context.Provider value={{name:'feifei'}}></ context.Provider> 包裹

• 并且通过value传值

import React, { Component } from 'react';
import context from './../../context/index'
import Son from './son.js'
​
class Father extends Component {
    state = {
        data:'1111'
    }
    updateName= ()=>{
        this.setState({data:'feifei'})
    }
    render() {
        return (
            <div onClick={this.updateName}>
                这是父组件{this.state.data}
                <context.Provider value={{name:this.state.data}}>
                    <Son></Son>
                </context.Provider>
            </div>
        );
    }
}
​
export default Father;

3.子组件(方式一)

• 在子组件中也需要导入创建好的context.js

• 并且在需要的子组件中用context.属性获取数据

• 在子组件中要用回调的方式接收数据

• 中间不管经过多个组件只要是子组件都可以使用Consumer包裹接收数据

  import React, { Component } from 'react';
  import context from './../../context/index.js'
  ​
  class Son extends Component {
      render() {
          return (
            <context.Consumer>
              {context => {
                return (
                  <div>
                    name:{context.name}
                  </div>
                )
              }}
            </context.Consumer>
          );
        }
      }
  ​
  ​
  export default Son;

  4.子组件(方式二)

  子组件也可以采用另外一种方式获取context上的数据

        使用contextType的方式

import React, { Component } from 'react';
import context from './../../context/index.js'

class Son1 extends Component {
    static contextType = context;
    render() {
        return (
            <div>这是son1{this.context.name}</div>
        )
      }
    }


export default Son1;