react中的context基本使用

最新推荐文章于 2024-11-06 08:30:00 发布

原创最新推荐文章于 2024-11-06 08:30:00 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #组件通信 #Context

react 专栏收录该内容

38 篇文章

订阅专栏

本文深入讲解React中的Context API，介绍如何使用Provider和Consumer组件进行跨层级数据传递，简化组件间的状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果两个组件相隔层级比较多，可以使用Context实现组件数据的传递
Context提供了两个组件，Provider和Consumer
Provider提供数据
Consumer消费数据，也就是接收数据

使用步骤：

1调用React。creatContext（）创建Provider（提供数据）和Cunsumer（消费数据）两个组件

2.使用Provider组件作为父节点

3.设置value属性，表示要传递的数据

4.哪一层想要接收数据，就用Consumer进行包裹，在里面使用回调函数接收的参数就是传递过来的数据

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

import './index.css'
/* 
  Context
*/

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

class App extends React.Component {
  render() {
    return (
使用Provider 包裹要传递数据的组件，使用value属性进行数据的传递
      <Provider value="pink">
        <div className="app">
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className="node">
      <SubNode />
    </div>
  )
}

const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <div className="child">
使用Consumer包裹一个回调函数，回调函数的参数就是传递过来的数据
      <Consumer>{data => <span>我是子节点 -- {data}</span>}</Consumer>
    </div>
  )
}

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