Question

我试图在react中创建一个注销按钮，尽管它可以工作（将用户注销），但我希望隐藏该按钮，除非我的本地存储具有“ token”的值。此时，当它不为null时，我希望我的注销按钮出现在屏幕上，以便用户注销。

我称为此按钮的部分位于下面，当前仅在我的本地存储具有分配给“令牌”的值的情况下才会发生onclick事件

import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import Register from "./Register";
import Logout from "./logout";
import Button from "react-bootstrap/Button";

render(

  <>

     <Login />
     <div>

     <h1>OR</h1>
     </div>
     <Register />
     </div>

     <Button onClick={event => {if(localStorage.getItem('token') !== null)
                                Logout()}} }>Logout</Button>

  </>, 
  document.getElementById("root")
);

当前，此功能可按预期工作，但未隐藏。我已经考虑过创建一个仅在满足以下参数的情况下才导出按钮的函数；

import Logout from "./logout";
import Button from "react-bootstrap/Button";
import React from "react";

function logoffBut(){
  if (localStorage.getItem("token") !== null) {
    return <Button onClick={event => Logout()}>Logout</Button>;
  }
}
export default logoffBut;

然后致电

<logoffBut />

在上面的渲染中，

代替那里的当前注销按钮。但是，当我登录并将“令牌”存储在本地存储中时，它不会生成注销。但是，尽管令牌已正确存储在我的本地存储中？

我想要一些帮助，以查看如何编写此函数来检查本地存储中的“令牌”是否不为空，以及是否不为空，然后生成注销按钮。谢谢。

Answer 1

您可以三元运算符仅在需要时检查和呈现

localStorage.getItem('token') !== null ? <Button onClick={event => {if(localStorage.getItem('token') !== null) Logout()}} }>Logout</Button> : null;

建议

我建议您也将内容拆分到另一个组件，例如

import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import Register from "./Register";
import Logout from "./logout";
import Button from "react-bootstrap/Button";
import loginPage from "./LoginPage";

render(<loginPage></loginPage>,document.getElementById("root")
);

Answer 2

您可以使用&&运算符在localStorage不为null时呈现按钮

{localStorage.getItem('token') !== null && <Button> ... </Button>}

Answer 3

Use conditional rendering in JSX

import React from "react";
    import { render } from "react-dom";
    import Login from "./Login";
    import Register from "./Register";
    import Logout from "./logout";
    import Button from "react-bootstrap/Button";

    render(

      <>

         <Login />
         <div>

         <h1>OR</h1>
         </div>
         <Register />
         </div>

         {
            localStorage.getItem('token') !== null ? <Button onClick={event => Logout()>Logout</Button>: null
         }  

      </>, 
      document.getElementById("root")
    );

Answer 4

我喜欢使用display-if道具。

<div display-if={someCondition}>MY TEXT</div>

安装babel插件后即可使用 https://www.npmjs.com/package/babel-plugin-jsx-display-if

除非变量具有值，否则如何隐藏按钮

4 个答案: