如何使用`createContext`从父组件向子组件传递值？

Question

而不是传递的props父母和child1（的child2的父） - >到的child2，我想使用createContext和接收与价值useContext。
我试图做的是不正确的，因为我收到了一个错误**'booleanContext' is not defined**。

如何传递createContext状态/值？

App.js
CreatePass 是 SignUp 中的一个组件

  const [signUpFirst, setIfSignUp] = useState(true);
  const booleanContext = createContext(setIfSignUp);
  
 return (
    <booleanContext.Provider value={setIfSignUp}>

   <div>
     </Switch>
   <Route exact path='/signup'>
          <SignUp homePage={exitSignUpPage} setUserNumber={setUserID} />
        </Route>
        <Route exact path='/home'>
          <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
        </Route>
      <CreatPass /> 
      </Switch>
     </div>
    </booleanContext.Provider>
  );

注册.js

  render() {
    return (
      <div className='signUp-div'>
        <Header />
        <Router history={history}>
          <div className='form-div'>
            <Redirect to='/signup/mobile' />
            <Switch>
              <Route exact path='/signup/mobile' component={MobileNum} />
              <Route exact path='/signup/idnumber'>
                <IdentNumber setPersonalID={this.props.setUserNumber} />
              </Route>
              <Route exact path='/signup/password'>
                <CreatePass />
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    );
  }

CreatePass.js //'booleanContext' is not defined no-undef

const CreatePass = () => {
  const changeBooleanValue = useContext(booleanContext);

  const handleClickButton = () => {
      changeBooleanValue(true);
  };

  return (
    <div className='form-div'>
  <button onClick={handleClickButton}>Click</button>
    </div>
  );
};
export default CreatePass;

编辑 - 更新：

这个解决方案不好，它与我上面所做的值相同，booleanContext未定义 -

export const booleanContext = createContext(); // default value is undefiend
...
const App = () => 
     return(
     <booleanContext.Provider value={setIfSignUp}>
      <CreatPass />        
     </booleanContext.Provider>
      )
}
export default App;

会很高兴的解释

Answer 1

对于上下文提供者和消费者，通常我会为它创建 1 个钩子，就像您可以将其放入父组件中的useBoolean.tsx返回BooleanProvider组件和useBoolean可以导入到子组件中的函数一样。

基本上任何全局函数都应该将其所有子函数包装在其Provider.

所以，如果你想<CreatePass/>从提供者那里访问值，它需要是它的孩子Provider

<BooleanProvider>
  <CreatePass/>
</BooleanProvider>

useBoolean.tsx 会有这样的事情

// useBoolean.tsx
const BooleanContext = createContext()

export const BooleanProvider = ({ children }) => {
  const [signUpFirst, setIfSignUp] = useState(true)

  return (
    <BooleanContext.Provider value={{ signUpFirst, setIfSignUp }}>
      {children}
    </BooleanContext.Provider>
  )
}

export const useBoolean = () => {
  const context = useContext(BooleanContext)
  if (context === undefined) {
    throw new Error(`${useBoolean.name} must be within ${BooleanProvider.name}`)
  }
  return context
}

父组件将像往常一样

// Parent component
import { BooleanProvider } from 'hooks/useBoolean'

const Parent = () => (
  <BooleanProvider>
    <Child1 />
  </BooleanProvider>
)

Child1 将拥有 Child2，Child2 将使用我们创建的 useBoolean 函数

// Child1 component
const Child1 = () => (
  <div>
    <Child2 />
  </div>
)

// Child2 component
import { useBoolean } from 'hooks/useBoolean'

const Child2 = () => {
  const { setIfSignUp } = useBoolean()

  return <div></div>
}

希望这有助于为您澄清一些事情。我只是想在这里解释我对使用 react context api 的理解以及我的做法。

我试图创建这样的钩子函数以便于代码管理 - 它帮助我理解这个上下文直接使用钩子命名约定做什么。当钩子函数不在Provider:D 中使用时，它也会抛出错误。干杯！