Ik ben net begonnen met het gebruik van React, dus dit is waarschijnlijk een heel eenvoudige fout, maar hier gaan we. Mijn html-code is heel eenvoudig:
<!-- base.html -->
<html>
<head>
<title>Note Cards</title>
<script src="https://fb.me/react-0.11.2.js"></script>
<!-- <script src="https://fb.me/JSXTransformer-0.11.2.js"></script> -->
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="{% static "build/react.js" %}"></script>
</head>
<body>
<h1 id="content">Note Cards</h1>
<div class="gotcha"></div>
</body>
</html>
Merk op dat ik hier de statische laadbestanden van django gebruik. Mijn javascript is een beetje ingewikkelder, dus ik zal het hier niet allemaal posten tenzij iemand erom vraagt, maar de regel met de fout is deze:
React.renderComponent(
CardBox({url: "/cards/?format=json", pollInterval: 2000}),
document.getElementById("content")
);
Waarna ik de ‘doelcontainer is geen DOM-elementfout’ krijg, maar het lijkt erop dat document.getElementById(“content”) vrijwel zeker een DOM-element is.
Ik heb dezestackoverflow-post bekeken, maar het leek niet te helpen in mijn situatie.
Heeft iemand enig idee waarom ik die foutmelding krijg?
Antwoord 1, autoriteit 100%
Ik heb het door!
Na het lezen van deze blogpostrealiseerde ik me dat de plaatsing van deze regel:
p>
<script src="{% static "build/react.js" %}"></script>
was fout. Die regel moet de laatste regel zijn in de sectie <body>, vlak voor de tag </body>. Het verplaatsen van de lijn naar beneden lost het probleem op.
Mijn verklaring hiervoor is dat react op zoek was naar de id tussen de <head>tags, in plaats van in de <body>tags. Hierdoor kon het de contentid niet vinden en was het dus geen echt DOM-element.
Antwoord 2, autoriteit 40%
Zorg er ook voor dat de iddie is ingesteld in index.htmlhetzelfde is als degene waarnaar u verwijst in index.js
index.html:
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
index.js:
ReactDOM.render(<App/>,document.getElementById('root'));
Antwoord 3, autoriteit 11%
Gewoon om een alternatieve oplossing te geven, want die wordt niet genoemd.
Het is prima om hier het HTML-attribuut deferte gebruiken. Dus wanneer de DOM wordt geladen, wordt een gewoon <script>geladen wanneer de DOM het script raakt. Maar als we defergebruiken, dan zullen de DOM enhet script parallel worden geladen. Het leuke is dat het script uiteindelijk wordt geëvalueerd – wanneer de DOM is geladen (bron).
<script src="{% static "build/react.js" %}" defer></script>
Antwoord 4, autoriteit 9%
webpack-oplossing
Als je deze foutmelding krijgt tijdens het werken in React met webpack en HMR.
U moet de sjabloon index.htmlmaken en deze opslaan in de map src:
<html>
<body>
<div id="root"></root>
</body>
</html>
Als we nu een sjabloon hebben met id="root", moeten we webpack vertellen om index.html te genereren die ons index.html-bestand zal spiegelen.
Om dat te doen:
plugins: [
new HtmlWebpackPlugin({
title: "Application name",
template: './src/index.html'
})
],
templateeigenschap zal webpack vertellen hoe het index.htmlbestand te bouwen.
Antwoord 5, autoriteit 7%
Ook de beste manier om uw <script></script>naar de onderkant van het html-bestand te verplaatsen, lost dit ook op.
Antwoord 6, autoriteit 7%
Ik was dezelfde fout tegengekomen met React versie 16. Deze fout treedt op wanneer het Javascript dat probeert de React-component weer te geven, wordt opgenomen vóór het statische bovenliggende dom-element in de html. De oplossing is hetzelfde als het geaccepteerde antwoord, d.w.z. het JavaScript zou pas moeten worden opgenomen nadat het statische bovenliggende dom-element in de html is gedefinieerd.
Antwoord 7, autoriteit 2%
Je kunt ook zoiets doen:
document.addEventListener("DOMContentLoaded", function(event) {
React.renderComponent(
CardBox({url: "/cards/?format=json", pollInterval: 2000}),
document.getElementById("content")
);
})
De DOMContentLoaded-gebeurtenis wordt geactiveerd wanneer de eerste Het HTML-document is volledig geladen en geparseerd, zonder te wachten tot stylesheets, afbeeldingen en subframes klaar zijn met laden.
Antwoord 8, autoriteit 2%
Ik kreeg dezelfde foutmelding toen ik de app maakte met create-react-app, maar in /public/index.html heb ik ook een matriaalscript toegevoegd, maar er was een verbinding met “root”, dus ik voegde toe
<div id="root"></div>
net voor
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/ materialize.min.js"></script>
En het werkte voor mij.
Antwoord 9
Voor degenen die react js in een deel van de website hebben geïmplementeerd en dit probleem tegenkomen.
Voeg gewoon een voorwaarde toe om te controleren of het element op die pagina bestaat voordat u de react-component weergeeft.
<div id="element"></div>
...
const someElement = document.getElementById("element")
if(someElement) {
ReactDOM.render(<Yourcomponent />, someElement)
}
Antwoord 10
Een van de zaak die ik dezelfde foutmelding tegenkwam in een eenvoudig project. Ik hoop dat de oplossing iemand helpt.
Onderstaande codefragmenten zijn voldoende om de oplossing te begrijpen:
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
SomeFile.js : Let op de lijn ConstalLement = Document.getelementByID (“Overlays”); hieronder:
const portalElement = document.getElementById("overlays");
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
Ik had geen element met ID = “overlays” in mijn index.html-bestand, dus de gemarkeerde lijn hierboven werd null uitgevoerd en dus reageer niet in staat om in welk element het zou moeten vinden Portal IE {ReactDOM.createPortal(<Backdrop />, portalElement)} Dus ik heb onderstaande fout
Ik heb de div toegevoegd aan het bestand index.html en de fout was verdwenen.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="overlays"></div>
<div id="root"></div>
</body>