Как компонент React должен вызывать функцию в коллекции однородных потомков?

Question

Скажем, у меня есть компонент, который содержит функции для отправки запросов PUT на мой бэкэнд. Обычно эти запросы инициируются пользователем, взаимодействующим с этим компонентом напрямую. Давайте назовем это Child.

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

Я хочу, чтобы Parent отображала общую кнопку рядом с набором Child компонентов, что позволяет моему пользователю запускать запросы PUT от всех Child элементов за один раз.

В настоящее время я сохраняю ссылки каждого элемента Child, поскольку отображаю каждый из них в Parent. Когда пользователь нажимает обычную кнопку, отображаемую в Parent, я Parent перебираю каждую ссылку и вызываю функцию в каждом Child, которая запускает запрос PUT. Есть ли лучший способ?

Answer 1

Да, есть лучший способ. Вы должны поднять ваше состояние до до ближайшего общего предка, который должен получить к нему доступ. В этом случае у вас есть данные в каждом Child, которые должны быть доступны в пределах Parent. Вы пытаетесь слишком усердно сделать детей полностью независимыми объектами, которые отключены от их контейнера.

Вместо этого я бы предложил переосмыслить структуру вашего приложения, чтобы данные жили внутри Parent или другого предка как state, и этот предок просто передавал их каждому Child как props для рендеринг. Функция, выполняющая запрос PUT, может также необязательно существовать внутри предка и обрабатываться с помощью обратного вызова или - в зависимости от того, какая обратная связь должна происходить или не происходить от этого обратного вызова - просто может быть служебной функцией или службой, которая общий для компонентов.

Редактировать: это одна из основных концепций React и называется «нисходящий поток данных». Из документов React :

Должен быть единый «источник правды» для любых данных, которые изменяются в приложении React. Обычно состояние сначала добавляется к компоненту, который нуждается в нем для рендеринга. Затем, если другие компоненты также нуждаются в этом, вы можете поднять его до своего ближайшего общего предка. Вместо того, чтобы пытаться синхронизировать состояние между различными компонентами, вы должны полагаться на нисходящий поток данных.