ReactDOM не определен
У меня есть задача, это сайт, и мы можем вставить только один JS_SCRIPT в HTML. Так есть ли способ сделать это? Я хочу добавить скрипты с помощью document.createElement. Но не вышло.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title>
</title>
<link rel = "stylesheet" href = "">
</head>
<body>
<script src = "./build/test.js"></script>
</body>
</html>./build/test.js
var app = document.createElement('div');
app.id = 'root';
document.querySelector('body').appendChild(app);
(function() {
var hm = document.createElement("script");
hm.src = "https://unpkg.com/[email protected]/umd/react.production.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
(function() {
var hm = document.createElement("script");
hm.src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
(function() {
var hm = document.createElement("script");
hm.src = "./build/jsx.bundle.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();./build/jsx.bundle.js
'use strict';
ReactDOM.render(React.createElement(
'h1',
null,
'hello wolrd'
), document.querySelector('#root'));Есть ли какое-нибудь ключевое слово для поиска? Большое спасибо
Почему бы не сделать это с помощью приложения create react и вручную?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Попробуй это. Возможно, это не лучшее решение, но выполняет свою работу.
document.write('<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>');
Боковое примечание: document.write считается вредным и не должен использоваться
Вы всегда можете использовать require.js, чтобы объединить все ваши файлы javscript в один большой файл javascript.
Я думаю, вам нужно включить 2 тега скрипта, чтобы создать одноминутное приложение без инструментов для сборки, как объяснил здесь Дэн Абрамов
И он работает с вашим кодом, см. Пример здесь при вставке только одного JS_SCRIPT в HTML
Обновление: Webpack в порядке!
/ * Я получил ответ, надо поменять ./build.js, у меня все отлично работает. * /
var app = document.createElement('div');
app.id = 'root';
document.querySelector('body').appendChild(app);
(function() {
var hm = document.createElement("script");
hm.src = "https://unpkg.com/[email protected]/umd/react.production.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
(function() {
var hm = document.createElement("script");
hm.src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
// changed here
window.onload = function() {
var hm = document.createElement("script");
hm.src = "./build/jsx.bundle.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
}Вы также можете использовать библиотеку сборщика, например веб-пакет или просматривать. Это сгенерирует только один файл js для вашего приложения React, который включает все библиотеки, код, CSS и т. д., А затем вы сможете импортировать его в html своего веб-сайта. В конце у вас будет только один файл с именем (например) bundle.js (который уже включает в себя сценарии response-dom и response), и вы можете импортировать его в свой html следующим образом:
<script src = "bundle.js"></script>
Таким образом, нет необходимости создавать свои собственные js-файлы, которые включают в себя все, например, сценарий test.js, который у вас есть. Использование этих сборщиков имеет и другие преимущества, такие как минимизация и некоторые другие преобразования для старых браузеров.
Примечание: использовать веб-пакет непросто, посмотрите официальную документацию, и этот учебник прост и полезен.
Можно немного расширить "не работает"? Получаете ли вы ошибку трассировки? Ваш путь кажется законным