Как создать в React глобальную таблицу поиска, которая будет быстро доступна для всех компонентов?

Question

Я пытаюсь преобразовать веб-приложение из vanilla JS, чтобы оно реагировало. В веб-приложении есть то, что я называю диспетчером цвета, который в основном представляет собой таблицу поиска, которая позволяет приложению искать цвет, который еще не использовался, для назначения его различным элементам, расположенным в разных компонентах. Поскольку я еще мало знаю о React, мне было интересно, есть ли у кого-нибудь в сообществе представление о том, как это сделать оптимально. Я бы предпочел не использовать обратные вызовы для передачи информации от одного дочернего элемента, когда новое назначение цвета произошло с родителем, чтобы затем снова передать изменение в таблице поиска цветов другим дочерним элементам.

Вот снимок экрана веб-приложения vanilla JS, чтобы вы могли получить представление о различных компонентах и ​​изменениях цвета, которые необходимо выполнить в этих компонентах «параллельно».

ссылка

Большое спасибо за вашу помощь!

Answer 1

Мне кажется, что вы ищете какую-то форму государственного управления. Естественно, я бы порекомендовал Redux . Но это может быть излишним для вашего приложения (не знаком со всей информацией о нем.) В этом случае вы можете взглянуть на React Context

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

Взгляните на простой пример между переключением глобальных переменных день / ночь, к которым затем можно получить доступ из дочерних или родительских компонентов