标签: createcontext

假设我有一个用于检查用户是否登录的基本设置：

import { createContext } from "react";
const UserContext = createContext<string | null>(null)
export default UserContext

在我的 App.tsx 中，我想创建一个 useState 挂钩，以便我可以管理整个应用程序中的上下文状态：

//Context
const [context, setContext] = useState<string | null>(null)

  <UserContext.Provider value={{context, setContext}}>

    <Routes>

      <Route path="/" element={<Home/>}/> 
      <Route path="/login" element={<Login/>}/> 
      <Route path="/register" element={<Register/>}/> 
      <Route path="/admin" element={<Admin/>}></Route>

    </Routes>  

  </UserContext.Provider>

因此，据我所知，我只需要登录用户的名称，或者如果我想拒绝访问某些页面，则将上下文的状态设置为空。现在的问题是打字稿在这里对我大喊大叫，特别是在 Provider 的值中：

Type '{ context: string | null; setContext: 
React.Dispatch<React.SetStateAction<string | null>>; }' is not assignable to type 'string'.ts(2322)

我可以强制转换该值，如下所示：

value={{context, setContext} as any}

但这似乎并不是一个特别优雅的“打字”解决方案。

任何帮助表示赞赏！

我希望有条件地调用 useContext。这是我的原始代码，它运行正确，但 tslint 失败。

调用useResourceScope的组件- 比如说Component1

import { useEffect } from 'react';

export function useSubscribeListItemStore(
  inputResources?: ResourceScope
) {
  const resources = inputResources || useResourceScope();
  const listItemStore = resources.consume(listItemStoreKey);
  
  useEffect(function subscribeListItemStore() {
    // do some logic
  }, []);
}

定义useResourceScope的组件- 比如说Component2

import { createContext } from 'preact';
import { useContext } from 'preact/hooks';

export const ResourceScopeContext = createContext<ResourceScope | undefined>(undefined);

export function useResourceScope(): ResourceScope {
  const resources = useContext(ResourceScopeContext);
  if (!resources) {
    throw new Error( …

而不是传递的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' …

我正在关注 youtube 上的 React 教程，我正在尝试将项目从 JavaScript 转换为 TypeScript，但我在 useContext 方面遇到了很多麻烦，如果有人在这里帮助我，我将不胜感激。如果您想知道这里的教程是教程

    import React, {createContext, useContext, useState } from 'react';
    
    const StateContext = createContext();
    
    export const ContextProvider = ({ children }) => {
        const [activeMenu, setActiveMenu] = useState(true);
    
        return (
            <StateContext.Provider value={{activeMenu, setActiveMenu}}>
                {children}
            </StateContext.Provider>
        )
    }
    
    export const useStateContext = () => useContext(StateContext)