当前位置：首页 > news >正文

React第十节组件之间传值之context

news 2024/11/29 18:35:35

1、Context 使用creatContext() 和 useContext() Hook 实现多层级传值

概述：
在我们想要每个层级都需要某一属性，或者祖孙之间需要传值时，我们可以使用 props 一层一层的向下传递，或者我们使用更便捷的方案，用 creatContext() 和 useContext() 进行隔代之间传值，这种情况下，我们只需要在使用的组件中书写，而不用每一层级都进行书写；

使用中注意事项：
a、必须使用 Provider 组件，必须使用 value 接收要传递的属性：
b、下级会向上找最近的 Provider 获取其传入的 value
c、传入的 value 可以是任意类型的属性

extport default function MyPar(){return(<><MyCom.Provider value={属性}></MyCom.Provider></>)
}

1.1、基本用法实现上下级数据共享

首先创建通用 ComContext文件

import { createContext } from "react";
// 创建一个 UserInfoContext 组件
export const UserInfoContext = createContext()

其次创建最终使用组件 UserInfo

import {useContext} from 'react'
import { UserInfoContext } from './ComContext'
export default function UseInfo() {// 通过 useContext Hook 接收上级 UserInfoContext 传入的内容，总是获取距离最近的 Provider 的 value 值const userInfo = useContext(UserInfoContext)console.log('==userInfo===', userInfo)return (<div><h3>用户信息</h3><p>名称：{userInfo.name}</p><p>年龄：{userInfo.age}</p></div>)
}

最后在父组件中调用上面两个组件

import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const userInfo = {name: 'Andy',age: 18}return (<><h2>第一级：</h2>{/* 将普通对象传给下级 */}<UserInfoContext.Provider value={userInfo}>{/* 这里 不管写多少个 UseInfo 组件，都可以接收到 传入的 userInfo 对象 */}<UseInfo></UseInfo><UseInfo></UseInfo><UseInfo></UseInfo></UserInfoContext.Provider></>)
}

1.2、Context 与 useState() 使用

通过 useState() 动态修改 userInfo 数据，

import { useState} from 'react'
import { UserInfoContext } from './ComContext'
import UseInfo from './UseInfo'
export default function MyContext2() {const [userInfo, setUseInfo] = useState({name: 'Andy',age: 18})const hanldeChangeUserInfo = () => {setUseInfo({...userInfo, name: `${userInfo.name} + 1`})}return (<><h2>第一级：</h2><button onClick={hanldeChangeUserInfo}>修改name</button><UserInfoContext.Provider value={userInfo}>{/* 在下级接收的 userInfo 会实时更新 */}<UseInfo></UseInfo></UserInfoContext.Provider></>)
}

1.3、Context 树形结构示例

文件目录

在这里插入图片描述

声明levelContext文件

import { createContext } from "react";
export const LevelContext = createContext(0)

声明 HeadTitle文件

import  { useContext } from 'react'
import { LevelContext } from "./LevelContext";
export default function HeadTitle({children}) {//  使用 LevelContextconst level = useContext(LevelContext){switch(level) {case 1:return <h1>{`第${level}级`}</h1>case 2:return <h2>{`第${level}级`}</h2>case 3:return <h3>{`第${level}级`}</h3>case 4:return <h4>{`第${level}级`}</h4>case 5:return <h5>{`第${level}级`}</h5>}}
}

声明 ContMain 文件

这里使用 nanoid 插件，生成随机id，需要自行安装 yarn add nanoid

import React, { useContext } from 'react'
import HeadTitle from './HeadTitle'
import { LevelContext } from './LevelContext'
import { nanoid } from 'nanoid';
import './index.scss'
export default function ContMain({children}) {const level = useContext(LevelContext)return (<div className="container">{ children && children.length && children?.map((item, index) => <>// 这样 HeadTitle 组件中才能获取到 value 值<LevelContext.Provider key={`${nanoid()}4444`} value={item.level} ><HeadTitle ></HeadTitle><p>姓名：{item.name}</p><p>年龄：{item.age}</p>{item && item?.children && item?.children.length && (<div style={{marginLeft: `${item.level * 20}px`}}>// 自调用当前组件<ContMain>{[...item.children]}</ContMain></div>) }</LevelContext.Provider></>)}</div>)
}

声明index 文件

import ContMain from './ContMain'
import { userInfoArr } from './mock.js'
import { LevelContext } from './LevelContext'
export default function MyContext3() {return (<><h1>父级</h1><LevelContext.Provider value={1}><ContMain >{[...userInfoArr]}</ContMain></LevelContext.Provider></>)
}

效果如图：
在这里插入图片描述