Внимание к незначительным деталям в условном рендеринге React: основы 01

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

Примечание. В фрагменте кода я использую класс библиотеки начальной загрузки. Вы можете использовать свои собственные и соответствующим образом изменять классы.

function ListGroup() {
  let items = ["Banglore", "Hyderabad", "Delhi", "Mumbai"];
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

давайте напишем код, как добиться условного рендеринга. Когда список пуст, мы хотим отобразить собственное сообщение. Один из способов сделать это — написать условие if и отобразить другую разметку. Обратите внимание: я только что сделал список пустым и добавил для этого условие if.

function ListGroup() {
  let items = ["Banglore", "Hyderabad", "Delhi", "Mumbai"];
  items = [];

  if (items.length === 0)
    return (
      <>
        <h1>List</h1>
        <p>No item found</p>;
      </>
    );
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

Несколько вещей, которые нужно знать из приведенных выше фрагментов кода.

‹›‹/>< ⇒ это эквивалентно ‹Fragment /› (вы можете импортировать его из React.) Дополнительную информацию об этом можно найти в документации React или в любом онлайн-блоге.

import { Fragment } from "react";

Также, когда у нас есть несколько строк в jsx, мы заключаем наш код в скобки. ()

return (
      <>
        <h1>List</h1>
        <p>No item found</p>;
      </>
    );

Вам нравится дублирование? Я думаю, что определенно нет. Дублирование считается плохой практикой в ​​мире программного обеспечения. Давайте улучшим наш код, чтобы писать его лучше.

Давайте попробуем написать логику на JSX, но подождите, JSX не поддерживает операторы if… но мы можем визуализировать любую разметку, и есть несколько способов сделать это. Давайте пока воспользуемся троичным условием.