react18使用useContext实现多级多级间传值与修改
a、组件关系:依次嵌套
Demo2 -> Demo2ComA -> Demo2CompAA 。。。
b、实现
可实现 Demo2ComA 与 Demo2CompAA 两组件间数据获取与修改
(多层次嵌套时,也可实现,此处仅展示2层嵌套)
c、未实现,在测试过程中,发现以下问题
父组件 Demo2 中,实现 与 Demo2ComA 与 Demo2CompAA 同样的数据获取与修改
原因在于 父组件Demo2 中 Demo2Provider 仅能包裹 Demo2ComA 组件,未包裹父组件 Demo2
解决办法在看下。。。
可实现的如下展示
1、demo2.tsx
import React, { useState } from 'react' import { Demo2Provider } from '@/context/demo2Context' import Demo2ComA from './demo2ComA' const Demo2 = () => { const [n, setN] = useState(0) const [x, setX] = useState(0) return ( <Demo2Provider> <Demo2ComA /> </Demo2Provider> ) } export default Demo2
2、demo2Context.tsx
import { createContext, useState } from 'react' const Demo2Context = createContext({ count: 0, addCount: () => {}, flag: false, toggleFlag: () => {}, }) const { Provider } = Demo2Context const Demo2Provider = (props: any) => { const [count, setCount] = useState(0) const [flag, setFlag] = useState(false) const addCount = () => { setCount((val) => val + 1) } const toggleFlag = () => { console.log(122) setFlag((val) => !val) console.log(flag) } const demo2Ctx = { count, addCount, flag, toggleFlag, } return <Provider value={demo2Ctx}>{props.children}</Provider> } export { Demo2Context, Demo2Provider }
3、demo2ComA.tsx
import Demo2ComAA from './demo2ComAA' import { useContext } from 'react' import { Demo2Context } from '@/context/demo2Context' const Demo2ComA = () => { const demo2Ctx = useContext(Demo2Context) return ( <> <div> Demo2ComA <button onClick={demo2Ctx.toggleFlag}>flagChange</button> </div> <p>{demo2Ctx.count}</p> <Demo2ComAA /> </> ) } export default Demo2ComA
4、demo2ComAA.tsx
import { useContext } from 'react' import { Demo2Context } from '@/context/demo2Context' const Demo2ComAA = () => { const demo2Ctx = useContext(Demo2Context) return ( <div> <p>This is Demo2ComAA</p> <p><button onClick={demo2Ctx.addCount}>add</button></p> </div> ) } export default Demo2ComAA