React Context 跨组件传递数据

最新推荐文章于 2024-06-11 19:09:38 发布

阳光的男夹克

最新推荐文章于 2024-06-11 19:09:38 发布

阅读量326

点赞数

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

本文链接：https://blog.csdn.net/weixin_44640323/article/details/121607369

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在React中使用Context API进行组件间的数据传递，通过Provider提供数据，Consumer接收并使用数据。实例展示了Provider设置值和Consumer获取值的过程。

摘要由CSDN通过智能技术生成

Context 可以实现跨组件传递数据，Context 提供了两个组件：Provider 和 Consumer，Provider 用来提供数据，Consumer 用了获取数据

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建context得到两个组件
const {Provider, Consumer} = React.createContext()

class App extends React.Component {
    render() {
        return (
            // 2.使用 Provider 组件作为父节点
            // 3.设置value，表示要传递的数据
            <Provider value="pink">
                <div>
                    <Node/>
                </div>
            </Provider>
        )
    }
}

const Child = (props) => {
    return (
        <div>
             // 4.使用Consumer组件接收数据，内容是一个回调函数
            <Consumer>
                {
                    data => <h1>传递来的值 -- {data}</h1>
                }
             </Consumer>
        </div>
    )
}

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