У меня есть тег сценария в теге head html. Сценарий должен добавить прослушиватель событий после загрузки остальной части файла index.html. Поэтому до этого ничего не должно запускаться. Это почти то же самое, что добавление тега скрипта в конец тела, за исключением того, что браузер читает JavaScript и вызывает небольшую блокировку рендеринга.
index.html
Вот сообщение об ошибке консоли, которое я получаю от React:
Код: Выделить всё
Uncaught Error: _registerComponent(...): Target container is not a DOM element.
at invariant (react-dom.js:18118)
at Object._renderNewRootComponent (react-dom.js:9978)
at Object._renderSubtreeIntoContainer (react-dom.js:10069)
at Object.render (react-dom.js:10090)
at App (webapp.js:formatted:28)
Странно то, что функция App() запускается во время window.onload или window.addEventListener('load'). Я использовал это раньше на своем личном веб-сайте, но у меня была отсрочка и асинхронность в теге сценария, поэтому, возможно, именно поэтому он всегда срабатывал правильно.
webapp.js
Код: Выделить всё
...
function App() {
console.log('App loading...');
const reactroot = document.getElementById('root');
var app = React.createElement(WebApp, null);
ReactDOM.render( app, reactroot);
}
window.onload = App;
Если кто-то предложит использовать document.ready(), я стараюсь не полагаться на jQuery. Я также хочу использовать это для производственного веб-сайта, а не только для своего личного портфолио. Поэтому я не могу рассчитывать на добавление defer/async в тег скрипта.
Связанные темы:
Подробнее здесь:
https://stackoverflow.com/questions/461 ... s-in-windo
Мобильная версия