用打字稿反应上下文

Posted 2023-04-14

【中文标题】用打字稿反应上下文

【英文标题】：React context with typescript

【发布时间】：2020-12-19 14:35:48

【问题描述】：

我想在我的 React Typescript 项目中使用上下文，我该怎么做？

我有以下代码： 应用.js

import Context from 'context'

const App = () => 
  const [value, setValue] = useState("");
  return (
    <Router>
       <Context.Provider value=value, setValue>
       ... some routes
       </Context.Provider>
    </Router>
  )

然后在我的 context.js 文件中我有：

import createContext from 'react';

type ValueContextType = 
  value: string;
  setValue: (value: string) => void;


export const ValueContext = createContext<ValueContextType | undefined>(undefined);

我想用它在另一个文件中设置状态。假设 users.js

import ValueContext from 'context'

const Users () => 
  const value, setValue = useContext(ValueContext);

现在 value 和 setValue 的错误信息相同的问题：

类型“ValueContextType”上不存在属性“setValue”|未定义'

我怎样才能做到这一点？

【问题讨论】：

你在哪里定义setTitle？

抱歉，打错了！它是设置值。现已更新。

没有对您的解决方案的任何概述，这可能是矫枉过正；这应该通过使用 Redux 存储来共享吗？

无法共享整个解决方案，因为它包含 100 个文件。我对 redux 还不是很满意，所以现在上下文效果更好。但我已经发布了一个有效的答案。

【参考方案1】：

我找到了一个可行的解决方案：

App.js

import Context from 'context'

const App = () => 
  type ValueContextType = 
  value: string;
  setValue: (value: string) => void;
  
  const [value, setValue] = useState<ValueContextType | any>("");
  return (
    <Router>
       <Context.Provider value=value, setValue>
       ... some routes
       </Context.Provider>
    </Router>
  )

然后在我的 context.js 文件中我有：

import createContext from 'react';

type ValueContextType = 
  value: string;
  setValue: (value: string) => void;


export const ValueContext = createContext<ValueContextType | any>("");

users.js

import ValueContext from 'context'

const Users () => 
  const value, setValue = useContext(ValueContext);

我不知道这是否“hacky”，但它有效。

【讨论】：

const [value, setValue] = useContext(ValueContext);