Могу ли я добавить устаревший скрипт html/js в React
Я новичок в разработке внешнего интерфейса, у меня есть приложение для реагирования, и я хочу добавить старый HTML-код, который был создан ранее. (Этот HTML-код относится к нескольким файлам .js). Мне нужно сделать несколько вещей с моими данными реакции, а затем, когда я это сделаю, пользователь может выбрать часть результатов, которые должны запустить существующую функциональность html.
Для этого пытались сделать следующее:
componentDidMount () {
const script = document.createElement("script");
script.src = "/address/of/file.html";
script.async = true;
document.body.appendChild(script);
}
Это приводит к следующему сообщению: "Синтаксическая ошибка: неожиданный токен <". (< — первый символ, используемый в файле .html)
Я также пробовал рефакторинг самого кода, но он состоит из тысяч строк.
Любые идеи о том, как это можно сделать, или мне просто нужно добавить каждый файл JS отдельно и сделать бит html в самом компоненте реакции?
@Tholle HTML-файл содержит несколько файлов .js и выполняет обработку, но теперь, когда вы упомянули об этом, может быть, мне следует импортировать эти файлы .js отдельно и самому делать что-то из html-файла? Я знаю, что, как упоминалось выше, просто запускает файл, поэтому не уверен, как это будет работать, если их все по отдельности.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете включить свое реагирующее приложение в свой старый html, вам просто нужно вызвать ReactDOM.render, где бы вы ни хотели, чтобы ваше приложение было
<body>
<!-- older html code -->
<div id='appRoot'></div>
</body>
ReactDOM.render(<App />, document.getElementById('appRoot'));
Убедитесь, что ваш старый код (особенно js) не мешает React, т. е. не манипулирует DOM чем-либо, что находится внутри вашего #appRoot
Если вы хотите использовать внешний скрипт, вы не можете использовать расширение .html. Однако вы можете использовать файл .js с javascript страницы в нем:
componentDidMount () {
const script = document.createElement("script");
script.src = "/address/of/file.js";
script.async = true;
document.body.appendChild(script);
}
И вы сможете использовать этот js-файл для любого количества страниц.
Неожиданный токен "<" происходит от
<!doctype html>
вашей .html-страницы
Вы создаете тег script и помещаете в него html. Это действительно то, чего вы хотите?