Context组件通信

afte_rainx

已于 2023-08-18 10:10:37 修改

阅读量42

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-18 09:37:44 首次发布

本文链接：https://blog.csdn.net/weixin_52018902/article/details/132355095

版权

本文讲述了在项目中如何使用React的ContextAPI解决列表渲染时的高亮显示问题，通过定义context变量、Provider和useContext，实现在多个组件间共享和更新状态。

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

项目中使用到context组件通信，记录记录！！！

需求：

一个列表的循环渲染，但是每次只能有一个数据作为高亮显示（如何高亮显示新开文章写）

考虑过两种办法：

1、div存在一个tabIndex属性，可以每次只选择一个，使用useState声明一个属性作为唯一state选择即可，每次点击进行state更新

2、在父组件中声明一个context变量

选择2，因为list渲染时用的封装card组件，而不是最外层div标签不会起效。

使用context

Context的使用：

1、引入Context文件castScreen定义的变量值contextId

import { contextId } from "xxx/castScreen.js";

2、在castScreen文件中定义静态值作为context变量

import React from "react";
export const contextId = React.createContext();

3、在源文件中使用useState作为存储值的状态管理

const [screen, setScreen] = useState({ id: -1, b: "2"});
const [type, setType] = useState({ typeName: "1" });

4、在return的html中加入Provider的外壳，value即为useState中定义的变量和set函数

<contextId.Provider value={{ screen, setScreen, type, setType }}>   </contextId.Provider>

5、在子组件中进行context引入，例如使用type

//先引入castScreen文件
import { contextId } from "xxx/castScreen";
//利用context实现组件共享数据，分享当前menu选值
const context = React.useContext(contextId);

6、读取、修改type值

console.log(context.type.typeName);//进行===判断时有可能进行toString操作
context.setType({ typeName: "2" });

关注