React Context - 将 Provider 与上下文一起使用，例如 ContextName.Provider

Question

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

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

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

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.

在文件中，当您尝试将以下表达式转换为类型时，.tsTypeScript 会对表达式进行计数，而不是将其作为 JSX 表达式处理。<Type...>Type...