response.js сделать элемент DOM доступным для основного основного компонента

Question

Мне нужно выполнить события click (возможно, используя EventTarget.dispatchEvent()) для некоторых элементов DOM, которые достаточно глубоко вложены в мою иерархию компонентов. Мне нужно вызвать эти события щелчка из компонента верхнего родительского приложения.

Как вы подходите к этому? Я не хочу передавать функцию обратного вызова каждому из этих компонентов, поскольку они вложены так глубоко. Не удается ли сделать их элементы DOM доступными во всем мире/в компонент родительского приложения?

Answer 1

Три варианта:

1. Pass функции вниз с контекстом РЕАКТА.
2. Переместите дочерний элемент для отображения компонентов компонентов приложения, а затем используйте this.props.children, чтобы отобразить его в одном из вложенных дочерних элементов приложения.
3. Переместите логику событий клика ближе к дочернему компоненту и используйте Redux/Flux для обновления глобального состояния, к которому приложение может получить доступ (для reducex вы можете передать функцию в глобальное состояние, но это не рекомендуется, поскольку это не сериализуемо).

Вариант 1 является самым простым, но не рекомендуется использовать контекст, если вы можете ему помочь. Вариант 2 может быть невозможен. Возможно, вам нужен вариант 3.