Компоненты разбивают приложение на разные части и позволяют разработчику визуализировать и модифицировать каждую часть по отдельности. Реквизиты — это информация, которую родитель может передать своему дочернему компоненту для использования или ссылки. Реквизиты и компоненты — вот некоторые из причин, по которым React является таким мощным инструментом для разработчиков.
Ниже показан пример того, как свойства могут быть переданы дочерним компонентам для их использования:
Установка состояния здесь дает отличное место для хранения информации в компоненте Grocery.
Затем мы можем получить данные из URL-адреса в приведенном выше примере и сохранить эту информацию в состоянии элементов.
Мы также можем передать состояние элементов в дочерний компонент ItemContainer в качестве реквизита для его использования.
Затем дочерний компонент ItemContainer может перебирать состояние элементов, переданных через свойства, для создания каждого элемента с использованием другого дочернего компонента с именем GroceryItemCard. Существует также функция clickHandler, которая была передана из исходного родительского компонента Grocery в ItemContainer, а затем в компонент GroceryItemCard. GroceryItemCard отвечает за отрисовку каждого элемента в переданном ему массиве, а также за добавление функции clickHandler к каждому из этих элементов. Функция clickHandler «слушает» щелчок и добавляет элемент, по которому был сделан щелчок, в состояние CartItems, созданное ранее в родительском компоненте Grocery. Затем компонент Grocery передает массив товаров, по которым был сделан щелчок, аналогично тому, как был передан исходный массив товаров, но в другой компонент под названием YourCart:
Компонент YourCart перебирает товары, которые были ему переданы, а затем передает их компоненту GroceryItemCard так же, как это делал компонент ItemContainer.
Что, если бы мы захотели удалить элементы в компоненте YourCart при нажатии на них? Первой мыслью может быть добавление функции к компоненту GroceryItemCard для прослушивания кликов, а затем удаления любого элемента, по которому был сделан щелчок. Но подождите, компонент GroceryItemCard уже имеет прослушиватель кликов, который добавляет товар в YourCart.
На приведенном выше изображении следует отметить, что и ItemContainer, и YourCart передаются реквизиту, который называется clickHandler. clickHandler указывает на разные функции для каждого из соответствующих компонентов. Таким образом, при нажатии на GroceryItemCard функция clickHandler отсылается обратно своему родителю, и если родителем является компонент YourCart, он позволяет исходному родителю Grocery использовать функцию cartRemover, а если родителем является компонент ItemContainer, он позволяет исходный родитель Grocery знает, что нужно использовать функцию AddCartItems.
Посмотрите здесь на изображении ниже, что clickHandler вызывается только один раз в компоненте GroceryItemCard и что он обращается к своим родительским компонентам, чтобы проверить, знают ли они, что делать с функцией:
Использование компонентов и свойств позволяет разработчикам извлекать данные в одном месте и передавать определенные части данных каждому компоненту, который в них нуждается. В нашем примере мы извлекаем все данные из компонента Grocery, чтобы затем передать их дочерним компонентам, отвечающим за отображение этой информации. Если щелкнуть отображаемую информацию, она передает эту информацию обратно родительскому компоненту Grocery, который затем передает выбранные элементы в другой компонент, который будет отображать элементы в другом месте. Разработчики также могут использовать реквизиты для передачи различных функций в дочерние компоненты, но с использованием одной и той же ссылки. Это особенно полезно в сценариях, где несколько компонентов отвечают за отрисовку одного и того же дочернего компонента.
