Передача массивов в качестве свойств React-компонентов
Последняя задача продемонстрировала, как передавать информацию из родительского компонента в дочерний компонент в
качестве props или свойств. В этой задаче рассматривается, как массивы могут быть переданы в качестве
props . Чтобы передать массив элементу JSX, он должен рассматриваться как JavaScript и завернут в
фигурные скобки.
<ParentComponent>
<ChildComponent colors={["green", "blue" , "red" ]} />
</ParentComponent>colors через свойства. При доступе к свойству могут использоваться методы массива, такие как join().
const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>colors в строку, разделенную запятой. В результате получится:
<p>green, blue, red</p> Позже мы узнаем о других распространенных методах рендеринга массивов
данных в React.
Важное замечание: Если при рендеринге элементов массива вы возвращаете не просто строки, а другие компоненты или теги, необходимо в каждый из них передать свойство key. Например:
[1,2,3,2,1].map(value, index) => <li key={index}>Item {value}</li>Здесь так же обратите внимание, что для значения атрибута key я использовал переменную index, которая содержит в себе порядковый номер каждоый итерации при перечислении массива. Подробней с Array.map можно ознакомиться здесь. Дело в том, что key обязан быть уникальным, а в нашем массиве, как мы видим, значения не уникальные. Но если у вас массив с уникальными значениями (и вы уверены в этом), то конечно же лучше использовать их, по ряду причин. Просто помните об этом.
В редакторе кода есть компоненты List и ToDo . При рендеринге каждого List из компонента ToDo передайте свойство tasks назначенное массиву заданий, например ["walk dog", "workout"] . Затем войдите в этот массив tasks в компоненте List , выведя его значения в теге p. Используйте join(", ") чтобы отобразить все элементы массива props.tasks в элементе p как список строк, разделенный запятыми. В сегодняшнем списке должно быть не менее двух задач, а завтра должно быть не менее 3 задач.