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

小灰灰学编程

已于 2022-03-19 00:14:39 修改

阅读量1k

点赞数 1

分类专栏： React.js 文章标签： react.js 前端

于 2022-03-19 00:13:16 首次发布

本文链接：https://blog.csdn.net/chen_ac/article/details/123587463

版权

React.js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

文件结构

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.js

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

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

App.js

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

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 (
            <div className="parent">
                <h2>我是A组件</h2>
                <h3>我的用户名是：{username},年龄是：{age}</h3>

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

class B extends Component {
    render() {
        return (
            <div className="child">
                <h2>我是B组件</h2>
                <C/>
            </div>
        )
    }
}

// 类组件
class C extends Component {
    // 必须使用改语句生命contextType才能接收MyContext的值
    static contextType = MyContext
    
    render() {
        const {username,age} = this.context
        return (
            <div className="grand">
                <h2>我是C组件</h2>
                <h3>我从A组件接收到的用户名是：{username},年龄是：{age}</h3>
            </div>
        )
    }
}

// //函数式组件，需要借用Consumer组件进行操作
// function C() {
//     return (
//         <div className="grand">
//             <h2>我是C组件</h2>
//             <h3>我从A组件接收到的用户名是：
//                 <Consumer>
//                     {
//                         value => {
//                             return `${value.username},年龄是：${value.age}`
//                         }
//                     }
//                 </Consumer>
//             </h3>
//         </div>
//     )
// }

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;
}

效果

小灰灰学编程

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React中使用Context进行多层级组件传值

文件结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫