Полное руководство по освоению передачи данных с помощью реквизитов в React
Библиотека React очень популярна благодаря своей способности создавать динамические пользовательские интерфейсы. На своем пути изучения React вы столкнетесь с концепцией компонентов и тем, как они взаимодействуют. Думайте о компонентах как о фундаменте, на котором строятся пользовательские интерфейсы реагирования.
В этом уроке вы узнаете о:
- React и его компоненты.
- Концепция реквизитов и передачи данных между компонентами React.
- Эффективные компоненты взаимодействуют с помощью реквизита.
Все примеры кода доступны здесь
Предпосылки.
- Базовые знания синтаксиса JavaScript ES6.
- Базовые знания командной строки.
- Базовые знания HTML.
Приятно иметь:
- Базовые знания React.
Что такое Реакт?
React — это интерфейсная библиотека JavaScript с открытым исходным кодом, содержащая многоразовые функции, используемые для создания динамических пользовательских интерфейсов. Созданный Facebook в 2013 году, он стал наиболее широко используемым интерфейсным фреймворком.
Что такое React-компонент?
Компоненты React — это изолированные блоки функций, используемые для реализации определенных функций и создания пользовательских интерфейсов. Чтобы достичь требуемого динамического состояния, им необходимо получать данные для взаимодействия друг с другом. Они могут создаваться и обновляться разработчиком. Обновление модели компонента обновляет браузер пользователя. Представьте себе модель компонента как дерево с компонентом наверху. Компонент вверху называется корневым/родительским компонентом.
На диаграмме выше представлена простая древовидная структура компонентов списка дел.
Компонент App вверху представляет корневой/родительский компонент. Оно контролирует все. Он содержит два дочерних компонента: Добавить элемент и Элементы задач.
Элемент Добавить элемент содержит два компонента: Text-Input — текстовое поле, в которое вы можете ввести новый элемент, и Кнопка Добавить — кнопка, которая добавляет то, что вы написали, в свой Список дел.
Элементы задач также содержат два компонента. Компоненты — это добавленные элементы списка задач. Обратите внимание, что в этом случае их может быть больше двух.
Когда вы нажимаете на кнопку, в компоненте происходят события, которые могут повлиять на другие части кодовой базы. Например, при нажатии кнопки Добавить компонент Приложение сообщает о необходимости добавить новую задачу. Введенный текст отправляется в Элементы задач через компонент Приложение. Это действие добавляет новый элемент, а затем пользовательский интерфейс обновляется по мере изменения компонента.
В заключение, компоненты React — это строительные блоки, которые помогают нам создавать динамические веб-сайты и приложения. Они работают вместе, чтобы обеспечить хорошее отображение и работу приложения.
Зачем нам нужно передавать данные между компонентами?
React в основном полагается на свою компонентную модель. Но как эти компоненты будут реагировать друг на друга? Например, из приведенного выше примера, как компонент Добавить кнопку узнает, что данные должны быть отправлены в компонент Элементы задач при срабатывании события? Вот тут-то и появляется передача данных. Это важнейший аспект создания эффективных и динамичных пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы, которые можно упростить за счет создания повторно используемых и модульных компонентов.
Чтобы эффективно использовать Props, важно понимать, как он работает, в том числе как он используется для передачи данных между компонентами.
Концепция реквизита в React
Props (свойства) — это метод передачи данных от одного компонента к другому. С помощью реквизита родительский компонент может обмениваться данными с дочерним компонентом. Затем дочерний компонент отображает эти данные в пользовательском интерфейсе.
Реквизит неизменен. При передаче дочернему компоненту они не могут быть обновлены, но по-прежнему доступны для доступа и использования. Этот атрибут помогает поддерживать четкое разделение между родительскими и дочерними компонентами.
Как реквизиты вписываются в поток данных в React?
В React данные передаются однонаправленно. Он перемещается только от родительского компонента к дочернему компоненту. Вот пошаговый процесс передачи данных в компонентах React.
- Поток данных начинается с родительского компонента. Эти данные могут быть из API
- Данные родительского компонента передаются его дочернему компоненту с помощью реквизита.
- Дочерний компонент получает данные, обращается к ним и использует их. Здесь происходит потребление данных. Данные отображаются как элементы пользовательского интерфейса или для других функций.
- Затем данные динамически отображаются как контент в пользовательском интерфейсе. Он интерполируется с помощью Javascript XML(JSX) для отображения данных в виде вывода на экране.
- Изменения данных в родительском компоненте приводят к притоку новых данных в дочерний компонент, что приводит к повторной визуализации приложения.
- Поскольку поток данных является однонаправленным, поток останавливается на дочернем компоненте.
Как уже говорилось, передача данных между компонентами является важной функцией React. Чтобы освоить его, начните с создания простого приложения React с помощью инструмента Vite в вашем терминале и введите npm create vite@latest reactProps -- --template react..
Перейдите в каталог с помощью этой команды cd reactProps.
Далее необходимо установить все зависимости, выполнив команду npm install.
Дерево файлов должно выглядеть следующим образом.
Создание компонентов
Сначала откройте файл App.jsx в папке src и замените там код приведенным ниже. Все примеры кода будут выполняться в этом файле.
Этот код определяет функциональный компонент React с именем App.. Этот компонент отображает div, содержащий элемент h1 с текстом Hello world и элемент p с текстом Я компонент React. Чтобы сделать его доступным в других частях кодовой базы, файл необходимо экспортировать.
В файле main.jsx папки src следующий блок кода импортирует компонент App из файла App.jsx и отображает содержимое Компонент App в элементе div со значением id root, определенным в public/index.html.
Вот что выводит код.
Вы можете удалить файлы App.css и index.css из папки проекта, поскольку все примеры кода выполняются в файле src/App.jsx. .
Передача реквизита в компонент
Для начала импортируйте propTypes из библиотеки 'prop-types'. Эта библиотека гарантирует, что компоненту будет передан правильный тип реквизита.
После этого создайте компонент с именем Message, который будет принимать свойство с именем greeting и отображать в нем сообщение. Используя оператор return, сообщите компоненту, что отображать.
Наконец, укажите, что компонент greeting может принимать любой узел React, и сделайте это обязательным при использовании компонента Message. Узел React может представлять собой множество вещей, например строку, число, JSX и многое другое.
В файле src/App.jsx замените код внутри элемента div на приведенный ниже код в компоненте App.
Вот что выводит код.
Деструктуризация объекта реквизита
Синтаксис деструктуризации JavaScript ES6 может извлекать определенные реквизиты из объекта реквизита. Здесь напрямую удаляются реквизиты имени и возраста.
Замените код внутри элемента div родительского компонента кодом ниже.
Установка значения по умолчанию для реквизита
Значения по умолчанию могут быть установлены для реквизитов в дочернем компоненте, обеспечивая запасной вариант, когда ничего не указано. Например, в компоненте «Профиль» вы можете установить значение по умолчанию «Джон Доу» для свойства имени. Если не определено, свойство name примет значение «Джон Доу». Посмотрите код ниже, чтобы увидеть пример того, как это работает.
Распространение реквизитов с помощью синтаксиса расширения JSX
Синтаксис расширения JSX — это метод передачи свойств из родительских и дочерних компонентов. При этом родительский компонент собирает и передает свойства дочернему компоненту. Вы изучите эту технику на примере ниже.
Сначала импортируйте модуль PropTypes из пакета prop-types. Он определяет ожидаемый тип свойства для компонента.
Затем создайте компонент с именем Avatar, который получает реквизит и отображает информацию о человеке. Полученный объект реквизита разбивается на реквизит person. Затем элемент div в компоненте отображается на экране.
Наконец, для этого компонента присвойте ему свойство propTypes. Это свойство подтверждает входящую опору person. Опция person может быть различных типов и необходима при использовании компонента.
Создайте новый компонент под названием Profile. Этот компонент получит свойство и отобразит компонент Avatar, используя синтаксис распространения вместо передачи отдельных элементов для отображения отдельно.
Чтобы завершить эту настройку, необходимо создать последний компонент с именем App. Этот компонент определяет объект, включающий объект avatarProps с несколькими свойствами. Компонент App отображает компонент Profile, который принимает avatarProps через синтаксис расширения.
Всегда не забывайте экспортировать родительский компонент, чтобы обеспечить правильную функциональность.
Вот что выводит код.
В приведенном выше примере синтаксис расширения использовался дважды. Этот синтаксис позволяет сразу передать все полученные реквизиты из компонента Profile в компонент Avatar, устраняя необходимость перечислять их по отдельности.
Объект avatarProps передается компоненту Profile с использованием синтаксиса расширения, а его свойства передаются как отдельные реквизиты в компонент Profile. Преимущество этого подхода заключается в пересылке всех реквизитов из верхнего компонента (т. е. компонента App) в компонент Avatar.
Передача JSX в качестве дочерней опоры
Для рендеринга содержимого JSX внутри компонента JSX используется в качестве дочернего свойства. Он размещается между открывающим и закрывающим тегами компонента и обрабатывается логикой рендеринга компонента как динамический контент.
Чтобы реализовать это, создайте компонент с именем Modal, который использует свойство children для получения и отображения содержимого JSX, передаваемого между его тегами. Обратите внимание, что при использовании модального компонента необходимо указать children. Для этого необходимо импортировать PropTypes.
Компонент Modal отображается компонентом App с элементами JSX, определенными между его открывающим и закрывающим тегами.
Вот что выводит код.
Заключение.
Это руководство познакомило вас с миром компонентов React и той ролью, которую они играют в отображении динамических пользовательских интерфейсов. Вы познакомились с миром реквизита и разъяснили его концепцию.
Понимание того, как информация и данные передаются между родительскими и дочерними компонентами, пригодится на вашем пути освоения React. Дальше все становится сложнее, так что приготовьтесь.
Хорошей новостью является то, что он основан на фундаменте, уже рассмотренном в этом руководстве. О чем бы вы хотели узнать дальше? Дай мне знать в комментариях.
Нашли эту статью полезной?
Не стесняйтесь найти меня в Интернете для вопросов и разъяснений.
Спасибо, что дочитали до конца.
Первоначально опубликовано на https://munirwrites.hashnode.dev.
