Я интегрирую компоненты React в существующий веб-сайт.Я не хочу строить SPA, но есть определенная область, где более динамичные элементы были бы очень полезны.
Для этого я использую следующий шаблон:
- defineотдельные компоненты в их собственном файле, например,
Login.jsx - в
index.jsx, импортировать все компоненты, если для них найден div-держатель, например, если существует <div id="login">, отобразить в нем <Login >
Сейчас я пытаюсь добавить модальные диалоги на пару страниц.У меня был следующий подход:
- добавить следующий div ко всем страницам:
<div id="modal" class="modal fade" tabindex="-1" role="dialog"></div> - создать компонент реагирования
Modal, содержащий разметку, необходимую для начальной загрузки - подключите компонент реагирования к div
- добавьте кнопки на определенных страницах, где это необходимо:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
С помощью этой настройки я могу определить разметку только один раз и отобразитьмодал на страницах, где это нужно.Проблема, с которой я столкнулся, заключается в том, что мне нужно, чтобы модальное содержимое было разным, в зависимости от страницы, на которой оно находится (и не только).
Я мог бы хранить некоторые глобальные данные в объекте window, но я нахожуэто довольно некрасиво.
Какие варианты у меня есть для передачи внешних данных в существующие компоненты React?Я открыт и для других вариантов, даже если они означают корректировку способа включения React.