reactContext 更新子组件状态问题

THIS
  • 716

场景:我有个组件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>
    </>
  )
}
回复
阅读 311
1 个回答

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

直接用useContext获取不行吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏