Как скрыть кнопку, если переменная не имеет значения

Я пытаюсь создать кнопку выхода из системы в ответ, и хотя она работает (выводит пользователя из системы), я хочу сделать кнопку скрытой, если только в моем локальном хранилище нет значения «токен». В этот момент, когда он не равен нулю, я хотел бы, чтобы моя кнопка выхода из системы отображалась на экране, чтобы пользователь мог выйти из системы.

Раздел, в котором я вызываю эту кнопку, приведен ниже, который в настоящее время имеет событие 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 />

в моем рендере выше, вместо текущей кнопки выхода из системы, которая есть. Однако, когда я вхожу в систему и сохраняю «токен» в локальном хранилище, он не генерирует выход из системы. Но в этот момент, несмотря на то, что токен правильно хранится в моем локальном хранилище?

Мне просто нужна помощь, чтобы понять, как мне написать эту функцию, чтобы проверить, не является ли мой «токен» в локальном хранилище нулевым, и если он не нулевой, чтобы затем сгенерировать кнопку выхода из системы. Спасибо.

Вы можете просто сделать это, чтобы показать кнопку, если токен не равен нулю. { localStorage.getItem('token') && <Button onClick = {event => Logout()>Logout</Button> }

Shubham Verma 21.05.2019 08:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
427
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

Другие вопросы по теме