Context 的基本使用

无敌培根卷

于 2022-01-04 14:41:31 发布

阅读量460

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44501366/article/details/122246233

版权

本文介绍了在React应用中如何使用Context API来实现跨组件的数据传递，对比了props传递的不便，并详细阐述了创建Provider和Consumer组件的步骤，以及如何设置和接收数据。

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

在这里插入图片描述
App组件如果要传递数据给 child 组件，有两种方式：

使用 props 一层一层组件向下传递
使用 Context 跨组件传递数据（比如：主题、语言等）

显然！使用 Context 更加便利

使用步骤：

调用 React.createContext() 创建 Provider （提供数据）和 Consumer （消费数据）两个组件。

const { Provider, Consumer} = React.createContext()

使用 Provider 组件作为父节点。

<Provider>
  <div className="App">
    <Child1 />
  </div>
</Provider>

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

<Provider value = "pink">

调用 Consumer 组件接收数据

<Consumer>
   {data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

完整代码

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

class App extends React.Component {
  render() {
    return (
      <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>{data => <span>我是子节点 -- {data}</span>}</Consumer>
    </div>
  )
}