JS: React → Работа с коллекциями

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

See the Pen js_react_jsx_collections by Hexlet (@hexlet) on CodePen.

Выше приведен типичный код, в котором коллекция генерируется прямо в том месте куда и подставляется. Здесь мы снова видим, что внутрь jsx вложено выражение (через {}) внутри которого опять появляется jsx. Как правило, рекурсия на этом заканчивается :). Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render, например так:

class List extends React.Component {
  renderList() {
    // ...
  }

  render() {
    return (
      <ul>
        {this.renderList()}
      </ul>
    );
  }
}

Key

Для повышения эффективности Реакт настоятельно рекомендует идентифицировать каждую строку коллекции, которая генерируется. Связано это с механизмом, который производит изменения в DOM'е. Подробнее мы поговорим об этом позже, а сейчас нужно просто запомнить, что генерируя коллекцию элементов в jsx нужно обязательно проставлять уникальное свойство key, которое не меняется при повторной генерации коллекции.

Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).

class List extends React.Component {
  render() {
    const { data } = this.props;

    return (<ul>
      {data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>);
  }
}

Если подобного идентификатора нет, то можно использовать функцию uniqueId из библиотеки lodash.

import { uniqueId } from 'lodash';

class List extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <ul>
        {data.map(item => <li key={uniqueId()}>{item.name}</li>)}
      </ul>
    );
  }
}

Такой подход сработает, так как требуется уникальность только среди соседей.

Как видите ничего сложного в этом нет. Более того, если по какой-то причине вы забудете указать key в коллекции, то React начнет кидаться warning'ами об этом прямо в консоли браузера. Поэтому пытаться запомнить когда их ставить когда нет - не надо. В процессе работы вы и так об этом узнаете и сможете легко поправить.

Кстати key не обрабатывается как обычные свойство, и его нельзя получить внутри компонента так: this.props.key. Если вам нужны данные, которые были переданы в key внутри компонента, то просто передайте их отдельным свойством:

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

Root

Раньше это было не так, но сейчас допустимо из компонента возвращать массив компонентов. Реакт сам правильно вставит их в DOM:

class List extends React.Component {
  render() {
    const data = this.props.data
    const f = item => <div key={item.id}>{item.name}</div>;

    return data.map(f);
  }
}