Вы, вероятно, передавали реквизиты из родительского компонента в дочерний и задавались вопросом: «Хм... а что, если я хочу передать реквизиты из дочернего компонента в родительский? Я имею в виду... наоборот ?", верно? ? Я тоже задавался этим вопросом, но на самом деле есть решения.

Мы их пройдем.

Каков типичный поток реквизита?

Обычно реквизит передается от родителя к дочернему элементу. По сути, предположим, что у вас есть родительский компонент, который выглядит следующим образом:

Дочерний компонент, который мы видим ниже, использует компонент Button из очень любимой библиотеки компонентов shadcn/ui. Компонент Button имеет дочерний реквизит, который передается из родительского компонента.

Выше мы передаем дочерний реквизит из родительского компонента в дочерний компонент. Пока все хорошо, правда?

Что, если мы хотим передать реквизиты от дочернего элемента к родительскому?

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

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

И вот что мы делаем с дочерним компонентом:

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

Распространенная ошибка при передаче данных от дочернего элемента к родительскому

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

Один из способов предотвратить это — использовать перехват useCallback, который гарантирует, что функция, которую вы передаете в качестве обратного вызова дочернему компоненту, остается стабильной во время рендеринга, предотвращая ненужные повторные рендеринги и повышая производительность. Что происходит с useCallback, так это то, что вы передаете функцию в качестве свойства дочернему компоненту, и дочерний компонент будет иметь доступ к этой функции и может вызывать ее при необходимости. Давайте посмотрим, как мы можем это сделать.

Теперь давайте покажем, как это выглядит в дочернем компоненте:

Разве это не чище, чем передача функции, а затем обновление ее от дочернего элемента, а затем повторная передача родительскому элементу? Чище и проще в реализации, не так ли? ?

Спасибо за чтение!

Несмотря на то, что в React наверняка есть больше и потенциально даже более чистые и привлекательные способы передачи данных от дочернего элемента к родительскому, я надеюсь, что после прочтения моей статьи вам будет легче понять поток передачи данных. от ребенка к родителю и как реализовать это двумя разными способами. Кто знает, может быть, вы сами найдете более творческий способ сделать это? ? Если да, то мы будем очень признательны, если объясните свои идеи в комментариях!

Об авторе

Я разработчик программного обеспечения и технический писатель из Португалии. Я увлечен разработкой программного обеспечения ?‍? и мне нравится исследовать новые инструменты в повседневной жизни и находить интересные и творческие решения обычных деловых и технических проблем. Вы можете найти меня на GitHub. Если у вас есть какие-либо вопросы или отзывы, не стесняйтесь обращаться! ?