Как проверить, что переменная false в jsx

Question

изучаю React и не совсем понимаю синтаксис JSX. Есть переменная

  const [loading, setLoadong] = useState(false);

Пытаюсь в jsx проверить, что она является false

 { loading ?? null(
  <p>false</p>
 )
 }

Но не срабатывает.

Answer 1

Для того, чтобы использовать условие внутри JSX, нам придется обратиться к тернарному оператору, т.к. конструкция if/else в JSX недоступна. Так же важно заметить, что любое JS выражение, которое должно быть выполнено внутри JSX, должно быть описано внутри {}.

Предлагаю ознакомиться с примером использования условий внутри JSX, который я подготовил ниже

const {useState} = React;

const Example = () => {
  const [loading, setLoading] = useState(false);

  const getLoadingMsg = () => (
    <div>
     loading in progress...
    </div>
  )
  
  const getContent = () => (
    <div>
      content is available
    </div>
  )
  
  return (
    <div>
      <button onClick={() => setLoading(prev => !prev)}>toggle loading</button>
      <div>
        {
          loading ? getLoadingMsg() : getContent()
        }
      </div>
    </div>
  );
};


ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

БЛОГ НА HUSL

Как проверить, что переменная false в jsx

Ответы (1 шт):