TypeScript on useContext
TypeScript on useContext
提问于 2022-10-23 18:20:14
我正在关注youtube上的一篇反应教程，在那里我试图将项目从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)回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-23 20:11:00
我在野外见过三种选择。
备选案文1
这个选项有点烦人，因为StateContext值的类型可以是null | StateContextType。但是在您提供的代码中，它只在创建时是null，而在提供程序中不是null。无论如何，无论您在哪里使用useContext，您都必须对null保持警惕。
import React, { createContext, useState } from 'react';
type StateContextType = {
activeMenu: boolean;
setActiveMenu: React.Dispatch<React.SetStateAction<boolean>>;
};
export const StateContext = createContext<null | StateContextType>(null);
type ContextProviderProps = {
children: React.ReactNode;
};
export const ContextProvider = ({ children }: ContextProviderProps) => {
const [activeMenu, setActiveMenu] = useState(true);
const value = {
activeMenu,
setActiveMenu,
};
return (
<StateContext.Provider value={value}>{children}</StateContext.Provider>
);
};选项2
使用此选项，您可以将StateContext值类型转换为StateContextType。这意味着StateContext的值被假定为StateContextType。唯一的缺点是，StateContext的值在创建时是null，在StateContext.Provider中提供值之前的时间非常短。
但是，它相对安全，因为您要立即在提供程序中传递一个值。
import React, { createContext, useState } from 'react';
type StateContextType = {
activeMenu: boolean;
setActiveMenu: React.Dispatch<React.SetStateAction<boolean>>;
};
export const StateContext = createContext<StateContextType>(
null as unknown as StateContextType,
);
type ContextProviderProps = {
children: React.ReactNode;
};
export const ContextProvider = ({ children }: ContextProviderProps) => {
const [activeMenu, setActiveMenu] = useState(true);
const value = {
activeMenu,
setActiveMenu,
};
return (
<StateContext.Provider value={value}>{children}</StateContext.Provider>
);
};选项3
这一课归功于史蒂夫·金尼在React和TypeScript的前端大师上的课程。
import React, { useState } from 'react';
export function createContext<T>() {
const context = React.createContext<T | undefined>(undefined);
const useContext = () => {
const value = React.useContext(context);
if (value === undefined) {
throw new Error(
`useContext must be used inside a Provider with a value that's not undefined`,
);
}
return value;
};
return [useContext, context.Provider] as const;
}
type StateContextType = {
activeMenu: boolean;
setActiveMenu: React.Dispatch<React.SetStateAction<boolean>>;
};
export const [useContext, Provider] = createContext<StateContextType>();
type ContextProviderProps = {
children: React.ReactNode;
};
export const ContextProvider = ({ children }: ContextProviderProps) => {
const [activeMenu, setActiveMenu] = useState(true);
const value = {
activeMenu,
setActiveMenu,
};
return <Provider value={value}>{children}</Provider>;
};
const Component = () => {
// usage inside component
const context = useContext();
return <div></div>;
};
export const App = () => {
return (
<ContextProvider>
<Component />
</ContextProvider>
);
};Stack Overflow用户
发布于 2022-10-23 19:44:12
改变这一点：
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)对此：
import React, {createContext, useContext,
useState } from 'react';
interface Props {
children : ReactNode
}
const StateContext = createContext();
export const ContextProvider = ({ children }:Props) => {
const [activeMenu, setActiveMenu] = useState(true);
return (
<StateContext.Provider value={{activeMenu, setActiveMenu}}>
{children}
</StateContext.Provider>
)
}
export const useStateContext = () => useContext(StateContext)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74173658
复制相关文章
相似问题
腾讯云开发者
