Контекст

У нас есть «устаревшее» приложение, которое использует Bootstrap 3 с jQuery и Symfony в качестве серверной части. Но на последней странице, которую я создал, я использовал React для содержимого страницы.

Итак, в то время как «контейнер» (панель навигации, заголовок и т. Д.) Создается с использованием Bootstrap и jQuery, контент («вспомогательное приложение» для учета посещаемости) был создан с использованием React.

Все прошло хорошо. Затем я заметил, что существует библиотека «react-bootstrap», поэтому я заменил свои «классы div bootstrap» компонентами react-bootstrap.

Проблема

Первый элемент, который загружается, — это разборная панель. Там вы можете выбрать некоторые вещи, которые загружают другую панель. Как вы, возможно, знаете, react-bootstrap не нуждается в jQuery, но использует свой внутренний JS (отлично!). Но Bootstrap jQuery контейнера учитывает эту панель, когда она (контейнер) инициализируется, и применяет «вещи» jQuery (прослушиватели событий и некоторые атрибуты HTML, я думаю) к моей панели react-bootstrap.

Итак, я получил панель с двойной логикой, и такие вещи, как кнопка свертывания, больше не работают, потому что React закрывает панель, а затем jQuery открывает ее.

Другая панель, которая загружается после нажатия кнопки первой, работает хорошо, потому что она создается после того, как jQuery применяет свои «вещи».

Возможное решение

1. У нас есть плагин «Pace», который выдает событие «готово», когда Bootstrap завершил свою инициализацию. Если я выполняю ReactDOM.render() после того, как это событие отправлено, все работает хорошо (как и ожидалось), но это оставляет пустую страницу до завершения jQuery (менее 1 секунды, но заметно). Да, я мог бы использовать экран загрузки. В контейнере уже есть экран загрузки, который исчезает, как только загружается сценарий приложения, поэтому я не могу использовать его снова, потому что он появится снова, и это не очень хорошо (я не могу заставить его не исчезать).

2. Вместо использования компонента Panel я мог бы использовать классические «классы div bootstrap» только для контейнера Panel, который управляет переключением. Проблема в том, что мне пришлось бы делать это для каждого компонента начальной загрузки, который появляется первым (не только на этой странице, но и на любой другой странице).

Может быть, подсказка?

Есть ли способ остановить распространение jQuery на мой узел React? Примите во внимание, что мое приложение по-прежнему использует CSS из «контейнера» (база начальной загрузки, тема начальной загрузки и т. Д.)?