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