{"componentChunkName":"component---src-templates-docs-js","path":"/docs/lists-and-keys.html","result":{"data":{"markdownRemark":{"html":"

Спочатку давайте згадаємо, як перетворити списки у JavaScript.

\n

У коді, наведеному нижче, ми використовуємо функцію map(), щоб подвоїти значення в масиві numbers. Ми призначаємо новий масив, що повертається з map() до змінної doubled і виводимо її в консоль:

\n
const numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map((number) => number * 2);console.log(doubled);
\n

Цей код виведе [2, 4, 6, 8, 10] у консоль.

\n

У React, перетворення масивів у список елементів майже ідентичне.

\n

Рендеринг декількох компонентів

\n

Ви можете створити колекції елементів і вбудувати їх у JSX за допомогою фігурних дужок {}.

\n

Нижче, пройдемо по масиву numbers використовуючи функцію JavaScript map(), і повернемо елемент <li> у кожній ітерації. Нарешті, одержаний масив елементів збережемо у listItems:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>  <li>{number}</li>);
\n

Тепер ми включимо масив listItems цілком всередину елемента <ul>, і будемо рендерити його у DOM:

\n
ReactDOM.render(\n  <ul>{listItems}</ul>,  document.getElementById('root')\n);
\n

Спробуйте на CodePen

\n

Цей код виведе маркований список чисел від 1 до 5.

\n

Простий компонент-список

\n

Зазвичай, ви будете рендерити списки всередині якогось компонента.

\n

Ми можемо відрефакторити попередній приклад з використанням компонента, котрий приймає масив numbers та виводить невпорядкований список елементів.

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (\n    <ul>{listItems}</ul>  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,  document.getElementById('root')\n);
\n

Коли ви запустите цей код, ви отримаєте попередження, що для елементів списку має бути вказано ключ. “Ключ” - це спеціальний рядковий атрибут, який потрібно вказувати при створенні списку елементів. Ми обговоримо, чому це важливо, у наступній секції.

\n

Щоб виправити проблему з невказаними ключами, додамо нашим елементам key атрибут списку всередині numbers.map().

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    <li key={number.toString()}>      {number}\n    </li>\n  );\n  return (\n    <ul>{listItems}</ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Спробуйте на CodePen

\n

Ключі

\n

Ключі допомагають React визначити, які елементи були змінені, додані або видалені. Ключі повинні бути надані елементам всередині масиву, щоб надати елементам стабільну ідентичність:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>\n  <li key={number.toString()}>    {number}\n  </li>\n);
\n

Найкращий спосіб вибрати ключ - це використати рядок, котрий буде вочевидь відрізняти елемент списку від його сусідів. Найчастіше ви будете використовувати ID з ваших даних як ключі:

\n
const todoItems = todos.map((todo) =>\n  <li key={todo.id}>    {todo.text}\n  </li>\n);
\n

Якщо у вас немає стабільних ID для відрендерених елементів, то в крайньому випадку можна використовувати індекс елемента як ключ:

\n
const todoItems = todos.map((todo, index) =>\n  // Робіть так, тільки якщо у елементів масиву немає заданого ID  <li key={index}>    {todo.text}\n  </li>\n);
\n

Ми не рекомендуємо використовувати індекси для ключів, якщо порядок елементів може змінюватися. Це може негативно вплинути на продуктивність та може викликати проблеми зі станом компонента. Почитайте статтю Робіна Покорни (Robin Pokorny), яка досконало пояснює, чому індекси-ключі призводять до проблем. Якщо ви вирішите не призначити ключ для елемента в списку, то React за замовчуванням буде використовувати індекси як ключі.

\n

Якщо ви зацікавлені в отриманні додаткової інформації - ось детальне пояснення того, чому ключі необхідні.

\n

Вилучення компонентів з ключами

\n

Ключі необхідно визначати безпосередньо всередині масивів.

\n

Наприклад, якщо ви витягаєте компонент ListItem, то потрібно вказувати ключ для <ListItem /> елементів в масиві замість елемента <li> всередині самого ListItem.

\n

Приклад невірного використання ключів

\n
function ListItem(props) {\n  const value = props.value;\n  return (\n    // Невірно! Немає необхідності визначати тут ключ:    <li key={value.toString()}>      {value}\n    </li>\n  );\n}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    // Невірно! Ключ необхідно визначити тут:    <ListItem value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Приклад вірного використання ключів

\n
function ListItem(props) {\n  // Вірно! Тут не потрібно визначати ключ:  return <li>{props.value}</li>;}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    // Вірно! Ключ потрібно визначати всередині масиву:    <ListItem key={number.toString()} value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);
\n

Спробуйте на CodePen

\n

Елементам усередині map() зазвичай потрібні ключі.

\n

Ключі повинні бути унікальними лише між сусідніх елементів

\n

Ключі, що використовуються в масивах, повинні бути унікальними тільки серед своїх сусідніх елементів. Однак їм не потрібно бути унікальними глобально. Можна використовувати той самий ключ в двох різних масивах:

\n
function Blog(props) {\n  const sidebar = (    <ul>\n      {props.posts.map((post) =>\n        <li key={post.id}>          {post.title}\n        </li>\n      )}\n    </ul>\n  );\n  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>\n      <p>{post.content}</p>\n    </div>\n  );\n  return (\n    <div>\n      {sidebar}      <hr />\n      {content}    </div>\n  );\n}\n\nconst posts = [\n  {id: 1, title: 'Привіт, світ', content: 'Ласкаво просимо до вивчення React!'},\n  {id: 2, title: 'Установка', content: 'React можна встановити через npm.'}\n];\nReactDOM.render(\n  <Blog posts={posts} />,\n  document.getElementById('root')\n);
\n

Спробуйте на CodePen

\n

Ключі слугують підказками для React, але вони ніколи не передаються до ваших компонентів. Якщо в компоненті потрібно те ж саме значення, то передайте його явно через проп з іншим ім’ям:

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

У наведеному вище прикладі компонент Post може прочитати значення props.id, але не props.key.

\n

Вбудовування map() у JSX

\n

У прикладах вище ми оголосили окрему змінну listItems та вставили її у JSX:

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}
\n

JSX дозволяє вбудувати будь-який вираз у фігурні дужки, щоб ми зуміли включити результат виконання map():

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  return (\n    <ul>\n      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>\n  );\n}
\n

Спробуйте на CodePen

\n

Іноді це призводить до більш чистого коду, але буває і навпаки. Як і в будь-якому JavaScript-коді, вам доведеться самостійно вирішувати, чи варто витягати код в змінну заради читабельності. Майте на увазі, що якщо код всередині map() занадто громіздкий, має сенс витягти його в окремий компонент.

","frontmatter":{"title":"Списки та ключі","next":"forms.html","prev":"conditional-rendering.html"},"fields":{"path":"content/docs/lists-and-keys.md","slug":"docs/lists-and-keys.html"}}},"pageContext":{"slug":"docs/lists-and-keys.html"}},"staticQueryHashes":[]}