reactContext 更新子组件状态问题

Question

场景：我有个组件A，他的孙子组件是C 顺序大概是A>B>C 的形式、我想在A组件的state发生变化的时候，可以更新C（孙子组件）的state状态、但是在文档只有在<Consumer> 组件内进行render渲染，有没有好的方法可以更新到C组件呢

以下是伪代码：

const MyContext = React.createContext();

const BComponent =  () => {
  return(
    <>
      <div>我是二级组件</div>
      <CComponent />
    </>
  )
}

const CComponent =  () => {

  const [res, setRes] = useState(null)  // 我要获取<AComponent> mun的值

  useEffect(() => {
    
    if(res) {
      console.log('执行一些方法')
    }
  }, [res])

  return(
    <>
      <MyContext.Consumer>
      {
        context => {
          {setRes(context.mun)} // 这样似乎不对？
          return (
            <div>我是三级组件，同时我要获取AComponent的状态</div>
          )
        }
      }
      
      </MyContext.Consumer>
    </>
  )
}

const AComponent =  () => {

  const [mun, setMun] = useState(1);
  return(
    <>
      <MyContext.Provider value={ { mun }}>
          <div>我是一级组件</div>
          <BComponent />
      </MyContext.Provider>
    </>
  )
}

Answer 1

https://stackblitz.com/edit/react-qguttg

直接用useContext获取不行吗?