React跨组件通信context

前端小趴菜

已于 2022-05-21 17:08:51 修改

阅读量157

点赞数

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

于 2022-05-20 16:07:25 首次发布

本文链接：https://blog.csdn.net/xjx0121/article/details/124885037

版权

react.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中利用Context API创建Provider和Consumer，实现跨组件的数据传递。首先通过createContext()创建Context对象，然后在根组件上使用Provider组件包裹，并传递state数据。最后，在需要使用数据的组件中，用Consumer组件来接收和渲染数据。

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

创建Context对象导出 Provider 和 Consumer对象

//解构createContext()
const { Provider, Consumer } = createContext()

使用Provider包裹根组件提供所需要的数据

<Provider value={this.state.message}>
    {/* 这里放根组件 */}
</Provider>

需要用到数据的组件使用Consumer包裹获取数据

<Consumer >
    {value => /* value是传过来的值，进行渲染*/}
</Consumer>

代码示例

import React, { createContext }  from 'react'

// 1. 创建一个Context对象 
const { Provider, Consumer } = createContext()


// 3. 组件C接收传过来的值
function ComentC() {
  return (
    <Consumer >
      {value => <div>{value}</div>}
    </Consumer>
  )
}

function ComentA() {
  return (
    <ComentC/>
  )
}

// 2. 提供要传输的数据
class App extends React.Component {
  state = {
    message: '这是根组件的数据'
  }
  render() {
    return (
      <Provider value={this.state.message}>
        <div className="app">
          <ComentA />
        </div>
      </Provider>
    )
  }
}

export default App