自定义上下文提供程序无法返回任何内容，包括基本 html 元素

Question

我正在按照本教程进行操作，并准备完成有关实现自定义 AuthContext 提供程序的部分。这是建议的代码：

const AuthProvider = ({ children }) => {
  const [token, setToken] = React.useState(null);

  const handleLogin = async () => {
    const token = await fakeAuth();

    setToken(token);
  };

  const handleLogout = () => {
    setToken(null);
  };

  const value = {
    token,
    onLogin: handleLogin,
    onLogout: handleLogout,
  };

  return (
    <AuthContext.Provider value={value}> // AuthContext defined right above component; initialised as an empty object.
      {children}
    </AuthContext.Provider>
  );
};

据我所知，这绝对没问题。但是当我尝试将它添加到我的代码中（字面意思是复制并粘贴到其中）时，return 语句会抛出 9 个错误。Cannot find namespace 'AuthContext'.ts(2503)，'>' expected.ts(1005)，Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)ETC。

即使我只是尝试返回 a div，我也会得到Cannot find name 'div'.ts(2304)。

是什么阻止我在返回语句中返回任何元素？

编辑：更新以包含我的完整代码。

import React, { createContext, ReactNode, useState } from "react";

type AuthContextType = {
  token: string | undefined;
};

export const AuthContext = createContext<AuthContextType>(
  {} as AuthContextType
);

const fakeAuth = () =>
    new Promise((resolve: (arg0: string) => void) => {
      setTimeout(() => resolve("2342f2f1d131rf12"), 250);
    });

export const AuthProvider = ({ children }: {children: ReactNode}) => {
  const [token, setToken] = useState<string | undefined>();

  const handleLogin = async () => {
    const token = await fakeAuth();
    setToken(token);
  };

  const handleLogout = () => {
    setToken(undefined);
  };

  const value = {
    token,
    onLogin: handleLogin,
    onLogout: handleLogout,
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

Answer 1

检查文件名，在我的例子中，它的扩展名为 .ts，通过更改为 .tsx 解决了这个问题

import React, { useState, useEffect, createContext, ReactNode, Context } from 'react';

export type AuthContextType = {
  user?: boolean;
  isLoading?: boolean;
}

export const initialState: AuthContextType = {
  user: false,
  isLoading: true,
};

export interface AuthProviderProps {
  children?: ReactNode
}

export const AuthContext: Context<AuthContextType> = createContext<AuthContextType>(initialState);

const AuthCookieProvider: React.FC<AuthProviderProps> = ({ children }: AuthProviderProps): JSX.Element => {
    const [user, setUser] = useState<AuthContextType>(initialState);

    useEffect(() => {
        checkUserLogin(setUser);
    }, []);

    return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};

export default AuthCookieProvider;