时间戳

首页 > 解决方案 > 反应条件页面渲染

reactjs - 反应条件页面渲染

问题描述

我正在使用 React 为我的前端应用程序创建主页。

如果他尚未登录，我希望它将用户引导到登录页面，如果他已经登录，则将他引导到另一个页面。我正在检查浏览器是否知道使用函数 getCurrentUser() 的用户。

这是我在主页上尝试做的。

SignIn 和 Myprofile 是我想要渲染的 React 组件。

function App() {
  return (
  {if getCurrentUser()==null {return <SignIn/>} else return { <Myprofile/>}}
  )

这是getCurrentUser()的定义：

const getCurrentUser = () => {
return JSON.parse(localStorage.getItem("user"));
};

它看起来一切正常，但我看到的只是空白页。如果我为此处的选项之一添加 h1 标签：

function App() {
  return (
  {if getCurrentUser()==null {return <SignIn/>} else return { 
   <div> 
   <h1>hello</h1> 
   <Myprofile/> 
   </div>}}
  )

我可以看到 H1，但看不到这些组件的其他元素。

我该如何解决？谢谢你！

标签： reactjs

解决方案

您可以使用三元运算符，以便将return语句替换为?and:并且if可以删除关键字。我相信，条件==应该是===根据新的javascript。

 function App() {
  return (
    <div>
      {getCurrentUser() === null ? (
        <SignIn />
      ) : (
        <div>
          <h1>hello</h1>
          <Myprofile />
        </div>
      )}
    </div>
  );
}

推荐阅读