Conceptual Article

Процедура рендеринга массивов в React

Published on December 1, 2020
authorauthor

joshtronic and christinagorton

Русский
Процедура рендеринга массивов в React

Введение

В этой статье рассказывается о рендеринге массивов в React и о лучших практиках для рендеринга разных элементов внутри компонентов.

Одно из преимуществ использования современных языков веб-разработки, включая JavaScript, заключается в возможности быстро автоматизировать генерирование блоков кода HTML.

Использование циклов в отношении массивов или объектов означает, что для каждого элемента код HTML нужно писать только один раз. Более того, любые будущие изменения также потребуется вносить только один раз.

Рендеринг множества элементов

Чтобы выполнить рендеринг множества элементов JSX в React, вы можете применить к массиву цикл с методом .map() и возвращением одного элемента.

В примере ниже мы применяем цикл к массиву reptiles и получаем элемент li для каждого элемента в массиве. Вы можете использовать этот метод, если хотите вывести один элемент для каждого элемента массива:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

Итоговый результат будет выглядеть следующим образом:

Output
- alligator - snake - lizard

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

Рендеринг набора элементов внутри компонента

В этом примере, как и в предыдущем, мы применяем к массиву цикл и создаем серию компонентов элемента списка.

Для начала обновите код, чтобы использовать компонент <ol> для хранения элементов <li>. Компонент <ol> создаст упорядоченный список элементов:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Однако, если вы посмотрите на консоль, вы увидите предупреждение о том, что каждый дочерний элемент массива или итератора должен иметь уникальный ключ.

Предупреждение в консоли

Данное предупреждение появляется, потому что при попытке рендеринга коллекции внутри компонента необходимо добавить ключ.

В React уникальный ключ используется для того, чтобы определить, для каких компонентов в коллекции требуется повторный рендеринг. Добавление уникального ключа позволяет React не выполнять повторный рендеринг всего компонента целиком при каждом обновлении.

На этом шаге мы выполним рендеринг нескольких элементов внутри компонента и добавим уникальный ключ. Обновите код, чтобы добавить ключ к элементам списка и убрать предупреждение:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

После добавления ключа предупреждение больше не будет отображаться внутри консоли.

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

Рендеринг прилегающих элементов

Для рендеринга одного или нескольких элементов компонента в JSX необходимо заключить их в оболочку.

В этом примере мы сначала возвращаем список элементов без применения цикла к массиву:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

При этом в консоли выводится постоянная ошибка:

Постоянная ошибка React для прилегающих элементов JSX

Чтобы исправить эту ошибку, необходимо заключить блок элементов li в оболочку. Для списка их можно заключить в элемент ol или ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Прилегающие элементы <li> теперь заключены в тег <ol>, и ошибка больше отображаться не будет.

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

Рендеринг прилегающих элементов с помощью React.fragment

До React v16.2 была возможность заключать блоки компонентов в элементе <div>. При этом получается приложение с большим количеством тегов div, и такие приложения часто называли «суп div».

Для устранения этой проблемы для React был выпущен новый компонент fragment:

Если требуется выполнить рендеринг списка внутри тега, но вы не хотите использовать теги div, вы можете использовать React.Fragment:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Код после рендеринга будет содержать только элементы li, и компонент React.Fragment не будет отображаться в коде.

Элементы JSX внутри оболочки React.Fragment

Также в случае с React.fragment следует отметить, что ключ добавлять не требуется.

Можно отметить, что React.fragment писать сложнее, чем добавлять теги <div>. К счастью, команда React разработала более короткий синтаксис для представления этого компонента. Можно использовать <> </> вместо <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Заключение

В этой статье мы рассмотрели разные примеры рендеринга массивов в приложении React.

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

В зависимости от сценария использования вы можете создавать простые списки, заключенные внутри компонента fragment, для которого не требуется ключ.

Чтобы узнать больше о лучших практиках React, подпишитесь на серию Программирование на React.js на DigitalOcean.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
joshtronic

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more