Javascript 在返回布尔值或JSX的React组件上应该使用什么类型？

我正在使用AWS Ampify处理我的登录。因为用户会话是一个异步进程，所以我想防止应用程序在首次加载时更改状态。为此，我希望在IsAuthentication布尔值仍然为false时阻止应用程序渲染

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

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;

const-App:React.FC=（）=>{
const[IsAuthentication，SetIsAuthentication]=useState（true）；
const[isAuthenticated，userHasAuthenticated]=useState（false）；
useffect（（）=>{
onLoad（）；
}, []);
const onLoad=async（）=>{
试一试{
等待Auth.currentSession（）；
userHasAuthenticated（true）；
}捕获（e）{
如果（e！=“无当前用户”）{
警报（e）；
}
}
SetIsAuthentication（假）；
};
返回(
！正在验证&&(
)
);
};
导出默认应用程序；

我遇到的问题是Typescript引发了以下错误：

类型“（）=>false | JSX.Element”不可分配给类型“FC”。 类型“false | Element”不可分配给类型“ReactElement | null”。 类型“false”不可分配给类型“ReactElement | null”。TS2322

---

是否有一种类型可以分配给函数，使其能够返回布尔值或某个JSX？

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

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

返回(
{！正在验证&&(
)}
);
};

根据设计，功能组件应该返回JSX或

null

。因此，返回一个

布尔值

违背了惯例。简单的修复方法是将条件转换为三元操作：

！是否正在验证？…：空