Как загрузить компонент React в существующее приложение jQuery на jQuery, щелкните

Question

У меня есть существующая одностраничная сборка приложения в jQuery / HTML.Я не могу переписать существующее приложение в React, потому что оно очень большое.

Я планирую создавать новые экраны в этом существующем приложении с помощью React.Однако мне интересно, как можно рендерить экраны React по нажатию кнопки / ссылки из существующей навигации?

Это что-то вроде функции обработчика щелчков - это обычный JavaScript, который находится вне компонента React и внутри функции-обработчика.должен написать код для загрузки нового экрана, который сделан в React Component.

Я не включаю в index.html реактивные реактивы.js и response-dom.js напрямую, скорее я создаю bundle.js с помощью babel и webpack.Так что доступ к ReactDOM.render за пределами bundle.js вызывает ошибку.

Answer 1

С React вы используете ReactDOM.render , чтобы прикрепить макет, созданный с помощью компонента React, к DOM.

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

Это может выглядеть примерно так:

$('#my-button').click(() => ReactDOM.render(<MyApp />, $('#my-container')[0]);

В этом примере, <MyApp /> будет корневым компонентом вашего макета React, а my-container будет некоторым элементом div на странице, где вы хотите разместить макет React.

Что делать, если я не использую пакетный модуль?

Если на вашей существующей странице не используется какой-либо модуль-пакет, например, веб-пакет, вы не можете легко импортировать ReactDOM или использовать нотацию JSX в своем простом коде jQuery.

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

CRA может создать пакет, включающий ваш код JSX и все необходимые библиотеки.Вы включаете его на своей странице с помощью тега script, точно так же, как включаете библиотеку jQuery.

В своем приложении React создайте глобальную функцию, которая добавляет макет React в DOM, например:

window.renderMyReactApp = element => ReactDOM.render(<MyApp />, element);

В коде jQuery на вашей HTML-странице вызовите функцию следующим образом:

$('#my-button').click(function() {
  window.renderMyReactApp($('#my-container')[0]);
});