context使用步骤

Posted 2021-07-18 老张在线敲代码

第一步：先创建一个全局共享的js文件createContext.js

import React from 'react'
export const resume = {
    base:{
        name:'',
        age:'',
        genders:'male'
    },
    exp:{
        year:'',
        comp:'',
        job:'',
        detail:'',
        area:'lime'
    }
}
export const ResumeContext=React.createContext();

第二步：创建一个contextParent.jsx父组件

import React, { Component } from 'react';
import {ResumeContext} from "./createContext.js"
//子组件
import ContextChild from "./contextChild.jsx"
class View extends Component {
    constructor(props){
        super(props)
        this.state={
            base:{
                name:'',
                age:'',
                genders:'male'
            },
        }
    }
    render() {
        return (
            <div>
                <ResumeContext.Provider value={this.state.base}>
                    <h2>我是contextParent父组件</h2>
                    <ContextChild/>
                </ResumeContext.Provider>
            </div>
        );
    }
}
 
export default View;

第三步：创建contextParent父组件的子组件ContextChild.jsx

import React, { Component } from 'react';
//createParent的子子组件
import ContextChild2 from "./contextChild2"
class contextChild extends Component {
    render() {
        return (
            <div>
                <h3>我是contextChild子组件</h3>
                <ContextChild2/>
            </div>
        );
    }
}
 
export default contextChild;

第四步：创建contextParent父组件的子子组件ContextChild2.jsx(数据使用者)

import React, { Component } from 'react';
import {ResumeContext} from "./createContext"
class contextChild2 extends Component {
    //第二种方法
    // static contextType = ResumeContext;
    render() {
        console.log(this.context)
        const {genders}=this.context;
        return (
            <div>
            <h4>
                 我是contextChild2子子组件<br/>
                 {/*第二种方法：--{genders}*/}
                 {/*第三种方法：--{genders}*/}
            </h4>
            {/* 第一种方法*/}
            <ResumeContext.Consumer>
                {(value)=>(
                        <div>
                             第一种方法：--{value.genders}
                        </div>
                    )}
            </ResumeContext.Consumer>
            </div>
        );
    }
}


//第三种方法

```bash
//contextChild2.contextType=ResumeContext;
export default contextChild2;

原文链接：https://blog.csdn.net/WangLuke_/article/details/117365591