Мне нравится React, потому что мне легко работать с компонентами. И когда я работаю над проектом, в котором используются кликабельные эскизы для отправки пользователя на более подробную страницу, мне очень нравятся реквизиты React.
Реквизиты — это в основном атрибуты, которые можно добавить к компоненту внутри функции рендеринга родительского компонента. Они могут быть абсолютно любыми. А для проектов, о которых я упоминал выше, свойства становятся еще более мощными в сочетании с методом map(), как я покажу в примере ниже.
Перво-наперво, давайте настроим 2 файла. Мы назовем их Parent.js и Child.js, чтобы упростить задачу.
Parent.js будет нашим основным компонентом и покажет список имен. Child.js будет компонентом, который отображает эти имена.
Итак, для Child.js я просто настрою базовый компонент React с пустыми тегами ‹p›, которые будут отображать имя и фамилию, когда он будет завершен:
И Parent.js также начинается очень просто. Я добавил внутрь несколько дочерних компонентов просто в качестве заполнителя (и не забудьте импортировать дочерний компонент!).
Но поскольку мы хотим получить доступ к нашим именам и отобразить их с помощью ChildComponent, мы должны предоставить эту информацию ChildComponent. И здесь вступают в игру map() и props, а также немного об использовании состояния:
Вверху я импортировал имена из файла Names.js в том же каталоге, что и ParentComponent. Для этого примера я просто предполагаю, что данные об именах хранятся в файле, который выглядит примерно так:
И я добавил функцию getInitialState, которая устанавливает ключевые «имена», равные нашему импортированному массиву имен. Кроме того, я удалил из кода ‹ChildComponent /›, так как я использую map() для создания этих компонентов. Вы заметите, что сопоставление выполняется ВНЕ функции рендеринга. Это очень важно.
Пара ключ/значение, помещаемая в каждый дочерний компонент в функции карты, становится реквизитом для каждого дочернего компонента.
И последнее, что касается нашего ParentComponent. Нам нужно что-то вернуть, так как сейчас у нас просто пустые теги ‹div›. Мы добавляем наш сопоставленный массив, который мы назвали «именами» внутри:
Итак, теперь мы можем перейти к нашему файлу ChildComponent и закончить все. Проще говоря, теперь мы можем просто использовать реквизиты, переданные в каждый дочерний компонент во время сопоставления, и наши имя и фамилия будут отображаться:
И это все! (Если только я что-то совсем не забыл.) Чтобы увидеть рабочий пример CodePen, нажмите здесь.
