项目中使用到context组件通信,记录记录!!!
需求:
一个列表的循环渲染,但是每次只能有一个数据作为高亮显示(如何高亮显示新开文章写)
考虑过两种办法:
1、div存在一个tabIndex属性,可以每次只选择一个,使用useState声明一个属性作为唯一state选择即可,每次点击进行state更新
2、在父组件中声明一个context变量
选择2,因为list渲染时用的封装card组件,而不是最外层div标签不会起效。
使用context
参考:React中使用Context的3种方式by[MongieLee]
共涉及到三个文件 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" });