javascript - 在返回 Boolean 或 JSX 的 React 组件上应该使用什么类型？

Question

我正在使用 AWS-Ampify 来处理我的登录。因为用户会话是一个异步过程，所以我想防止应用程序在首次加载时改变状态。为此，我想阻止应用程序在我的 isAuthenticating 布尔值仍然为 false 时呈现。

简而言之，我希望根据 isAuthenticating 标志有条件地呈现应用程序：

const App: React.FC = () => {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);
  useEffect(() => {
    onLoad();
  }, []);

  const onLoad = async () => {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      if (e !== "No current user") {
        alert(e);
      }
    }

    setIsAuthenticating(false);
  };
  return (
    !isAuthenticating && (
      <div>
        <AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}>
          <NavbarElement />
          <Routes />
          <FooterElement />
        </AppContext.Provider>
      </div>
    )
  );
};

export default App;

我遇到的问题是 Typescript 抛出以下错误：

输入 '() => 假 | JSX.Element' 不可分配给类型 'FC<{}>'。输入'假| Element' 不可分配给类型 'ReactElement<any, any> | 无效的'。类型 'false' 不可分配给类型 'ReactElement<any, any> | 无效的'。TS2322

是否有一种类型我可以分配允许它返回布尔值或某些 JSX 的函数？

标签： javascriptreactjstypescript

Answer 1

该错误是由速记语法引起的，而不是由组件类型引起的。以下解决了上面发布的错误：

return (
    <>
      {!isAuthenticating && (
        <div>
          <AppContext.Provider
            value={{ isAuthenticated, userHasAuthenticated }}
          >
            <NavbarElement />
            <Routes />
            <FooterElement />
          </AppContext.Provider>
        </div>
      )}
    </>
  );
};