您现在的位置是:首页 >学无止境 >React中Context的使用,跨组件传值网站首页学无止境

React中Context的使用,跨组件传值

江河i 2023-05-16 00:00:02
简介React中Context的使用,跨组件传值

Context 是什么?

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。有点像Vuex
在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些场景来说是繁琐的,
Context 提供了一种在组件之间共享此类值的方式,不用通过组件树的逐层传递 props。

使用Context

自定义Context
src/store/testContext.js

*   Context相当于一个公共的存储空间,
*       我们可以将多个组件中都需要访问的数据统一存储到一个Context中,
*       这样无需通过props逐层传递,即可使组件访问到这些数据
*   通过React.createContext()创建context
import React from 'react';

const TestContext = React.createContext({
    name:'孙悟空',
    age:18
});
export default TestContext;

使用方式一

1.引入context
2.使用 Xxx.Consumer 组件来创建元素
Consumer 的标签体需要一个回调函数
它会将context设置为回调函数的参数,通过参数就可以访问到context中存储的数据

A.js(渲染到页面)

import React from "react";
import TestContext from "../store/testContext";
export default function A() {
  return (
    <div>
      我是A组件
      <TestContext.Consumer>
        {(ctx) => {
          return (
            <div>
              {ctx.name}-{ctx.age}
            </div>
          );
        }}
      </TestContext.Consumer>
    </div>
  );
}

在这里插入图片描述

使用方式二

1.导入Context
2.使用钩子函数useContext()获取到context
useContext() 需要一个Context作为参数
它会将Context中数据获取并作为返回值返回

import React, { useContext } from "react";
import TestContext from "../store/testContext";
export default function A() {
  const ctx = useContext(TestContext);
  return (
    <div>
      {ctx.name} -- {ctx.age}
    </div>
  );
}

在这里插入图片描述

Xxx.Provider正式使用Context中的数据

- 表示数据的生产者,可以使用它来指定Context中的数据
- 通过value来指定Context中存储的数据,
这样一来,在该组件的所有的子组件中都可以通过Context来访问它所指定数据

当我们通过Context访问数据时,他会读取离他最近的Provider中的数据,
 如果没有Provider,则读取Context中的默认数据

app.js

import TestContext from "../src/store/testContext";
export default function App() {
 return (
  <div>
 <TestContext.Provider value={{ name: "猪八戒", age: 28 }}>  这里value的内容才是Context真正的内容,
        <A></A>                                              达到组件数据共享
 </TestContext.Provider>
  </div>
)
}

在这里插入图片描述

Context讲解链接

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。