Я пытаюсь создать кнопку выхода из системы в ответ, и хотя она работает (выводит пользователя из системы), я хочу сделать кнопку скрытой, если только в моем локальном хранилище нет значения «токен». В этот момент, когда он не равен нулю, я хотел бы, чтобы моя кнопка выхода из системы отображалась на экране, чтобы пользователь мог выйти из системы.
Раздел, в котором я вызываю эту кнопку, приведен ниже, который в настоящее время имеет событие 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 />
в моем рендере выше, вместо текущей кнопки выхода из системы, которая есть. Однако, когда я вхожу в систему и сохраняю «токен» в локальном хранилище, он не генерирует выход из системы. Но в этот момент, несмотря на то, что токен правильно хранится в моем локальном хранилище?
Мне просто нужна помощь, чтобы понять, как мне написать эту функцию, чтобы проверить, не является ли мой «токен» в локальном хранилище нулевым, и если он не нулевой, чтобы затем сгенерировать кнопку выхода из системы. Спасибо.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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")
);
Вы можете тернарный оператор проверять и отображать только при необходимости
localStorage.getItem('token') !== null ? <Button onClick = {event => {if (localStorage.getItem('token') !== null) Logout()}} }>Logout</Button> : null;
Suggestion
Я предлагаю вам также разделить ваш контент на другой компонент, например
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")
);
Вы можете использовать оператор && для отображения кнопки, когда localStorage не равен нулю
{localStorage.getItem('token') !== null && <Button> ... </Button>}
Мне нравится использовать реквизит display-if.
<div display-if = {someCondition}>MY TEXT</div>
Вы можете использовать его после установки плагина babel. https://www.npmjs.com/package/babel-plugin-jsx-display-if
Вы можете просто сделать это, чтобы показать кнопку, если токен не равен нулю. { localStorage.getItem('token') && <Button onClick = {event => Logout()>Logout</Button> }