ReactDOM не определен - PullRequest
Новая
       9

ReactDOM не определен

0 голосов
/ 20 ноября 2018

Для меня есть задача, это веб-сайт, и мы можем вставить только один 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/react@16.6.3/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/react-dom@16.6.3/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'));

Есть ли ключевое слово для поиска?Большое спасибо

Ответы [ 4 ]

0 голосов
/ 20 ноября 2018

Вы также можете использовать библиотеку пакетов, такую ​​как webpack или browserify .Это создаст только один js-файл для вашего приложения React, который включает в себя все библиотеки, код, css и т. Д., А затем вы можете импортировать его в HTML-код вашего веб-сайта.В конце вы получите только один файл с именем (например) bundle.js (который уже включает в себя сценарии реагировать и реагировать), и вы можете импортировать его следующим образом в html: 

<script src="bundle.js"></script>

Таким образом, нет необходимости создавать свой собственный js, который включает в себя все, что есть у test.js скрипта.Использование этих пакетов также имеет и другие преимущества, такие как минимизация и некоторые другие преобразования для старых браузеров.

Примечание. Использовать веб-пакет не просто, взгляните на официальные документы, и этот учебник прост и полезен.

0 голосов
/ 20 ноября 2018

Вы всегда можете использовать require.js, чтобы объединить все ваши файлы javscript в один большой файл javascript

Я думаю, вам нужно включить 2 тега сценария, чтобы создать одно минутное приложение без инструментов для сборки, как объяснено здесь от Dan abramov

И он работает с вашим кодом, см. Пример здесь при вставке только одного JS_SCRIPT в HTML

0 голосов
/ 20 ноября 2018

Обновление: с веб-пакетом все в порядке!

/ * Я получил ответ, должен измениться ./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/react@16.6.3/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/react-dom@16.6.3/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);
}
0 голосов
/ 20 ноября 2018

Попробуй это.Может быть не лучшим решением, но выполняет свою работу. 

document.write('<script src="https://unpkg.com/react@16.6.3/umd/react.production.min.js"><\/script>');
...