Как передать функцию через реквизит в React

React — это библиотека на основе компонентов, поэтому вы можете создавать интерактивные приложения по одному компоненту за раз. Компоненты — это отдельные части пользовательского интерфейса, но все же связанные между собой. Props — это функция React, которая позволяет компонентам получать и передавать данные аналогично тому, как вы передаете аргумент функции. Это позволяет нам создавать сложные приложения с помощью React.

В этой статье мы рассмотрим, как использовать реквизиты для передачи функции от родительского компонента к дочернему. Если вам нравится изучать React, в моем блоге есть более 50 руководств по React.

Передача функции через реквизиты в React

Давайте посмотрим, как это сделать за 3 простых шага.

1. Определите функцию

Сначала нам нужно создать функцию в родительском компоненте. В большинстве случаев мы передаем функции для обработки событий в дочерних компонентах, поэтому давайте создадим простой обработчик событий onClick.

const handleClick = console.log("you just clicked a button")

Когда пользователь нажимает кнопку, наш обработчик событий просто записывает сообщение в консоль.

1. Передача функции через реквизит

Синтаксис установки реквизита аналогичен установке атрибута. Вы можете думать о реквизитах как о пользовательских атрибутах компонентов в React.

Чтобы передать функцию, вы можете просто сослаться на имя переменной, в которой хранится функция. В данном случае это будет переменная handleClick.

<childComponent handler={handleClick} /> 

В данном случае имя свойства (пользовательского атрибута) — handler. Фигурные скобки необходимы для установки значения выражения JavaScript (переменная handleClick содержит функцию).

Важно! Не вызывайте функцию, когда передаете ее через реквизит. Передавайте только ссылку на функцию. В противном случае функция будет запускаться тогда, когда вы этого не хотите (каждый раз при рендеринге компонента).

1. Вызов функции в дочернем компоненте

Теперь давайте вызовем функцию, переданную дочернему компоненту через реквизит.

Функциональные компоненты должны принимать реквизиты в качестве аргумента.

Props — это объект, свойства и значения которого соответствуют реквизитам и значениям, переданным компоненту. В данном случае объект props имеет одно свойство — handler, и его значением будет функция.

Вы можете вызвать функцию, используя точечную запись - props.handler(), или вы можете использовать новый синтаксис и деструктурировать объект реквизита.

Почему вам следует передавать функцию через реквизит?

Отслеживание изменений в состоянии и реквизитах очень важно в React. Хранение пользовательских данных в одном компоненте делает ваше приложение более последовательным и безошибочным. Обычно этот компонент должен находиться на вершине дерева компонентов (или рядом с ним), чтобы он мог хранить внутренние данные дочерних компонентов. Эту концепцию часто называют «Единым источником истины».

Также принято хранить введенные пользователем данные в состоянии. Элементы ввода обычно находятся в дочерних компонентах, а логика обрабатывается в родительском компоненте. Вам нужен какой-то способ получить данные из входных элементов в родительский компонент.

Пропсы строго одномерны — родительские компоненты могут передавать данные (или, как в данном случае, функцию) дочерним компонентам, но последние не могут передавать данные родительским компонентам.

Разработчики React часто передают обработчики событий дочерним компонентам, которые передают аргументы обработчикам событий, которые обновляют состояние родительского компонента.

---

Оригинал