Встроенный компонент react отключает выделение текста на других html-элементах
Я пытаюсь включить компонент react в шаблон django, который содержит нереактивный контент. Мой шаблон содержит следующий код:
{% load static %}
<!DOCTYPE html>
<html>
<body>
<h1>This text CAN NOT be selected</h1>
<h2>React app</h2>
<div id="react1"></div> <!-- this is the component that the react component will live in. -->
<script src="{% static js %}" defer></script> <!-- js is a variable pointing to the main.XXXXX.js file. -->
</body>
</html>
Переменная js относится к build/static/js/main.XXXXX.js-файлу, собранному с помощью npm run build и обслуживаемому с помощью django. Файл index.js (в react) просто добавляет компонент в div:
import React from 'react';
import { createRoot } from 'react-dom/client';
import App2 from './App2';
if(document.getElementById("react1") != null){
const root = createRoot(document.getElementById('react1'));
root.render(
<App2 />
);
}
Компонент (App2.js) представляет собой очень простой пример hello-world. Страница отображается корректно (приложение представляет собой простой счетчик), как показано на скриншоте, поэтому все файлы актуальны.
Как видно, я могу выбирать/взаимодействовать с приложением, но я не могу выделить текст, заданный в теге (и, что более важно, такие события, как нажатие на кнопку вне react, не срабатывают и т. д.). Контрприложение React работает, как и ожидалось.
Я гуглил эту проблему 3 часа и просто не могу понять, что я делаю не так. Я, конечно, хотел бы включить компонент react в div, а остальная часть страницы обрабатывает события (клики, выделение текста и т. д.) как обычно.
Что я ожидаю Я хочу внедрить компонент react в HTML-страницу таким образом, чтобы остальная часть страницы по-прежнему позволяла выделять текст, обрабатывать нажатия кнопок и т.д.