@IvanIvanIvanIvanIvan

Вопрос по документации Reactjs Lists and Keys?

https://codepen.io/gaearon/pen/jrXYRR?editors=0011
https://reactjs.org/docs/lists-and-keys.html
Вот эта часть

<li key={number.toString()}>
      {number}
    </li>


Тут в качестве ключа передается массив в виде строки? Или что? Не понимаю
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Вы наверно не заметили, но массив в примерах называется numbers, а аргумент колбека в который передается элемент массива number.

Исходные данные:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );


Результат выполнения метода map, в виде JSX:
[
  <li key="1">1</li>,
  <li key="2">2</li>,
  <li key="3">3</li>,
  <li key="4">4</li>,
  <li key="5">5</li>,
]

Результат в виде JS:
5a8201cac8298094680322.png

После рендера массива:
<ul>
  {listItems}
</ul>

получаем следующий html:
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>


О методе массива map можете почитать тут.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
ЭЛКОД Москва
от 120 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.
19 авг. 2018, в 18:43
2000 руб./за проект
19 авг. 2018, в 17:11
200000 руб./за проект
19 авг. 2018, в 12:12
40000 руб./в месяц