react 创建上下文（createContext）使用（超详细）

原本组件传递需要一层一层props传递，传递太过繁琐，例如以下代码：import React from 'react'function NeedData(props) {return <div>{props.value2}</div>;}// 中间组件function Middle(props) {return (<div><NeedData value2

前端-小鑫

21218人浏览 · 2021-07-30 13:45:12

前端-小鑫 · 2021-07-30 13:45:12 发布

原本组件传递需要一层一层props传递，传递太过繁琐，例如以下代码：

import React from 'react'
function NeedData(props) {
    return <div>{props.value2}</div>;
}
// 中间组件
function Middle(props) {
    return (
        <div>
            <NeedData value2={props.value} />
        </div>
    );
}
export default class Communication8 extends React.Component {
    render() {
        return <Middle value="abc" />;
    }
}

createContext 解决无需层级关系传递，主要有以下概念

createContext 创建一条索引，相当于开辟一个空间，可以配置默认参数，支持任何类型
Provider提供的数据（方法）共享，传参使用value，且value固定写法默认,必填，写其他不生效。value接收的变量建议state中：每一次 Provider 重渲染时，consumers 组件将会重新渲染，因为value属性总被赋予新值
Consumer接收者，必须以函数方式获取

第一种 Provider传递数据 Consumer接受数据

import React, { Component, createContext } from 'react';
const firstContext = createContext(); //firstContext自定义名称
//子组件
class Two extends Component {
    static contextType = secondContext
    render() {
        console.log(this.context)
        return (
            <div>
                <firstContext.Consumer>
                    {value => <div>{value}</div>}
                </firstContext.Consumer>
            </div>
        )
    }
}
//中间组件
class Middle extends Component {
    render() {
        return (
            <Two />
        )
    }
}
//父组件
class Communication9 extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            <div>
                <firstContext.Provider value='test'>
                     <Middle />
                </firstContext.Provider>
            </div>
        )
    }
}
export default Communication9

第二种 Provider传递方法 Consumer接受方法

import React, { Component, createContext } from 'react';
const secondContext = createContext(); //secondContext自定义名称
//子组件
class Two extends Component {
    static contextType = secondContext
    render() {
        return (
            <div>
                <secondContext.Consumer>
                    {onfunction => <div>{onfunction()}</div>}
                </secondContext.Consumer>
            </div>
        )
    }
}
//中间组件
class Middle extends Component {
    render() {
        return (
            <Two />
        )
    }
}
//父组件
class Communication9 extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            <div>
               <secondContext.Provider value={this.onfunction.bind(this)}>
               </secondContext.Provider>
            </div>
        )
    }
}
export default Communication9

createContext 创建多个

import React, { Component, createContext } from 'react';
const firstContext = createContext(); //firstContext自定义名称
const secondContext = createContext(); //secondContext自定义名称
//子组件
class Two extends Component {
    static contextType = secondContext
    render() {
        console.log(this.context)
        return (
            <div>
                <firstContext.Consumer>
                    {value => <div>{value}</div>}
                </firstContext.Consumer>
     
                <secondContext.Consumer>
                    {onfunction => <div>{onfunction()}</div>}
                </secondContext.Consumer>
            </div>
        )
    }
}
//中间组件
class Middle extends Component {
    render() {
        return (
            <Two />
        )
    }
}
//父组件
class Communication9 extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            <div>
                <firstContext.Provider value='test'>
                    <secondContext.Provider value={this.onfunction.bind(this)}>
                        <Middle />
                    </secondContext.Provider>
                </firstContext.Provider>
            </div>
        )
    }
}
export default Communication9

contextType 代替 Consumer 接收值 static

import React, { Component, createContext } from 'react';
const secondContext = createContext(); //secondContext自定义名称
//子组件
class Two extends Component {
    static contextType = secondContext
    render() {
        console.log(this.context)
        return (
            <div>
                <div>{this.context()}</div>
            </div>
        )
    }
}
//中间组件
class Middle extends Component {
    render() {
        return (
            <Two />
        )
    }
}
//父组件
class Communication9 extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            <div>
                    <secondContext.Provider value={this.onfunction.bind(this)}>
                            <Middle />
                    </secondContext.Provider>
            </div>
        )
    }
}
export default Communication9

import React, { Component, createContext } from 'react';
const test = {
    value: {
        val: '12345'
    },
    value2: {
        val: '6789'
    }
};
//设置全局createContext
const overallContext = React.createContext(
    test.value
);
class Communication9 extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            {this.context.val}
        )
    }
}
Communication9.contextType = overallContext;
export default Communication9