React中使用Context进行多层级组件传值

文件结构

index.html

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(, document.getElementById('root'))

App.js

import React, {Component} from "react";
import Dome from './components/context'
export default class A extends Component{
    render() {
        return (
            

                
            
        )
    }
}

components/context/index.jsx

import React, {Component} from "react";
import './index.css'

// 创建一个保存上下文的Context
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext
export default class A extends Component{
    state = {username: 'james',age: 23}
    render() {
        const {username,age} = this.state
        return (
            

                
我是A组件
                
我的用户名是：{username},年龄是：{age}

                {/* 需要使用Provider的value属性，才能让B以及B以下的组件都能够接收值 */}
                {/* 一次传多个值时，需要{}进行包裹 */}
                
                    
                
            

        )
    }
}

class B extends Component {
    render() {
        return (
            

                
我是B组件
                
            
        )
    }
}

// 类组件
class C extends Component {
    // 必须使用改语句生命contextType才能接收MyContext的值
    static contextType = MyContext
    
    render() {
        const {username,age} = this.context
        return (
            

                
我是C组件
                
我从A组件接收到的用户名是：{username},年龄是：{age}
            
        )
    }
}

// //函数式组件，需要借用Consumer组件进行操作
// function C() {
//     return (
//         

//             
我是C组件
//             
我从A组件接收到的用户名是：
//                 
//                     {
//                         value => {
//                             return `${value.username},年龄是：${value.age}`
//                         }
//                     }
//                 
//             
//         
//     )
// }

components/context/index.css

.parent {
    width: 500px;
    background-color: rgb(0, 255, 213);
    padding: 10px;
}

.child {
    width: calc(100% - 20px);
    background-color: rgb(0, 162, 255);
    padding: 10px;
}

.grand {
    width: calc(100% - 20px);
    background-color: rgb(212, 212, 212);
    padding: 10px;
}

效果