Ich habe ein Skript-Tag im Head-HTML-Tag. Das Skript sollte einen Ereignis-Listener hinzufügen, wenn der Rest der Datei index.html geladen wurde. Daher sollte vorher nichts ausgeführt werden. Es ist fast dasselbe wie das Hinzufügen des Skript-Tags am Ende des Textkörpers, außer dass der Browser das Javascript liest und ein wenig Renderblockierung verursacht.
index.html
Code: Select all
//meta stuff
Javascript is not enabled!
Hier ist die Konsolenfehlermeldung, die ich von React erhalte:
Code: Select all
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)
Das Seltsame daran ist, dass die Funktion App() während eines window.onload oder window.addEventListener('load') ausgelöst wird. Ich habe dies schon einmal auf meiner persönlichen Website verwendet, aber ich hatte eine Verzögerung und eine Asynchronisierung im Skript-Tag, also wurde es vielleicht deshalb immer korrekt ausgelöst.
webapp.js
Code: Select all
...
function App() {
console.log('App loading...');
const reactroot = document.getElementById('root');
var app = React.createElement(WebApp, null);
ReactDOM.render( app, reactroot);
}
window.onload = App;
Falls jemand die Verwendung von document.ready() vorschlägt, versuche ich, mich nicht auf jQuery zu verlassen.
Ich möchte dies auch für eine Produktionswebsite verwenden, nicht nur für mein persönliches Portfolio. Daher kann ich mich nicht darauf verlassen, dem Skript-Tag „defer/async“ hinzuzufügen.
Verwandte Themen:
Mobile version