React: Rendern Sie das Element in der Komponente „DidMount“ sofort erneut. Fehler: Die Eigenschaft „rootID“ von null kann nicht gelesen werden.
Ich mache ReactDOM.render #container element(top-level) in der function componentDidMount, React zeigt mir einen Fehler, Cannot read property 'rootID' of null .
Wenn ich setTimeout verwende und ReactDOM.render ausführe, funktioniert es. (Auch nach 0ms)
Ich fühle mich unsicher, kann mir jemand helfen?
html:
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="script/lib/react.js"></script>
<script type="text/javascript" src="script/lib/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>
A.jsx & B.jsx:
var A = React.createClass({
componentDidMount: function(){
ReactDOM.render(
<B />,
document.getElementById('container')
);
},
render: function(){
return (
<div>Hello World, I'm A.</div>
)
}
});
var B = React.createClass({
render: function(){
return (
<div>Hello World, I'm B.</div>
)
}
});
app.jsx:
ReactDOM.render(
<A />,
document.getElementById('container')
);
h1orz
Alle 3 Kommentare
Können Sie Ihr Problem in einem jsfiddle reproduzieren? https://jsfiddle.net/L3zn8dws/
cpb
am 1. Juni 2016
Die eigentliche Frage ist, warum rufen Sie ReactDOM.render innerhalb einer Lebenszyklusmethode auf? Sie versuchen, eine neue Komponente an dem Knoten zu mounten, an dem die aktuelle Komponente gemountet ist, was wie ein Anti-Pattern aussieht.
Sie sollten eine übergeordnete Stammkomponente verwenden, um zu verwalten, welche Komponente gerendert wird, anstatt zu versuchen, am Stamm neu zu mounten. Wenn Sie unbedingt mehrere React-Roots haben müssen (wofür Sie einen wirklich guten Grund haben sollten), sollten Sie eine Art Hilfssystem verwenden, um dies zu verwalten:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Wenn Sie mehrere React-Roots oder einen einzelnen Root haben, der im Laufe der Zeit gelöscht wird, empfehlen wir Ihnen, immer Ihre eigene Wrapper-API zu erstellen. Diese sehen alle etwas anders aus, je nachdem, wie Ihr äußeres System aussieht. Zum Beispiel haben wir bei Facebook ein System, das sich automatisch mit unserem Page Transition Router verbindet, um automatisch unmountComponentAtNode aufzurufen.
Anstatt ReactDOM.render() überall direkt aufzurufen, sollten Sie eine Bibliothek schreiben/verwenden, die das Mounten und Unmounten in Ihrer Anwendung verwaltet.
aweary
am 1. Juni 2016
Dies scheint ein nicht unterstütztes Muster zu sein: Sie versuchen, etwas in einen Container zu rendern, der bereits eine andere Komponente enthält, deren Lebenszyklen derzeit ausgeführt werden.
Wenn Sie möchten, dass B angezeigt wird, fügen Sie <B /> aus der Renderausgabe von A ein.
gaearon
am 27. Okt. 2016
Verwandte Themen
tleunen
·
3Kommentare
jvorcak
·
3Kommentare
Prinzhorn
·
3Kommentare
jimfb
·
3Kommentare
DimitarChristoff
·
3Kommentare
Hilfreichster Kommentar
Die eigentliche Frage ist, warum rufen Sie
ReactDOM.renderinnerhalb einer Lebenszyklusmethode auf? Sie versuchen, eine neue Komponente an dem Knoten zu mounten, an dem die aktuelle Komponente gemountet ist, was wie ein Anti-Pattern aussieht.Sie sollten eine übergeordnete Stammkomponente verwenden, um zu verwalten, welche Komponente gerendert wird, anstatt zu versuchen, am Stamm neu zu mounten. Wenn Sie unbedingt mehrere React-Roots haben müssen (wofür Sie einen wirklich guten Grund haben sollten), sollten Sie eine Art Hilfssystem verwenden, um dies zu verwalten:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Anstatt ReactDOM.render() überall direkt aufzurufen, sollten Sie eine Bibliothek schreiben/verwenden, die das Mounten und Unmounten in Ihrer Anwendung verwaltet.