时间戳

首页 > 解决方案 > React Context - 使用 Provider 和 ContextName.Provider 这样的上下文

reactjs - React Context - 使用 Provider 和 ContextName.Provider 这样的上下文

问题描述

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

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>
  );
}

标签： reactjstypescriptreact-context

解决方案

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

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

推荐阅读