React 上下文 - 将 Provider 与 ContextName.Provider 等上下文一起使用

Question

我正在使用打字稿创建上下文。

export const UserContext = createContext<
  { user: User; onChangeUser: (userId: string) => void } | undefined
>(undefined);

创建将收集子元素作为道具的提供程序时，出现以下错误

export function UserProvider({ children }: Props) {
  const [userId, setUserId] = useState<string | null>(null);

  // this error: Cannot find namespace 'UserContext'.
  return (
    <UserContext.Provider
      value={{
        user,
        onChangeUser: (userId: string) => {
          setUserData(userId);
        },
      }}
    >
      {children}
    </UserContext.Provider>
  );
}

Answer 1

您的文件需要 .tsx 扩展名而不是 .ts。

在 .ts 文件中，当您尝试将以下表达式转换为 Type... 类型时，TypeScript 将计算 <Type...> 个表达式，而不是将其作为 JSX 表达式处理。

React 上下文 - 将 Provider 与 ContextName.Provider 等上下文一起使用

React Context - Use Provider with context like ContextName.Provider

typescript

reactjs

react-context