0

我有这样的场景：这是我的场景

从那张图片让我解释一下：

  1. 我有一个变量，当我单击该组件中的按钮时，该变量将从 child_2 (C) 更改它的值。此变量将用于更改 child_1 (B) 和 grandChild (D) 中的视图。
  2. 到目前为止，我的应用程序在 child_1(B) 中运行。当我在 grandChild (D) 中访问这个变量时，这个变量是“未定义的”。所以它不能改变grandChild中的观点。

这是我的代码的一部分：

import React, { Component } from 'react'

const GlobalContext = React.createContext()
export class GlobalProvider extends Component {
    state = {
        isMinimize: false
    }
    setMinimize = () => {
        this.setState({ isMinimize: !(this.state.isMinimize) })
    }
    render() {
      const {isMinimize} = this.state
      const {setMinimize} = this
      return(
        <GlobalContext.Provider value={{isMinimize, setMinimize}}>
          {this.props.children}
        </GlobalContext.Provider>
      )
    }

}

export default GlobalContext

这是我在父类中的代码的一部分：

<>
<GlobalProvider>
   <SideBar />     // this child_1(B)
   <NavBarTop />   // this child_2(C)      
</GlobalProvider>
</>

我像往常一样把这个类称为父类。它仅适用于 child_2(C) 到 child_1(B)。我怎样才能访问grandChild中的那个变量？

4

0 回答 0