React: Rerenderize o elemento em componentDidMount imediatamente Erro: Não é possível ler a propriedade 'rootID' de null.
Eu faço ReactDOM.render #container element(top-level) na função componentDidMount, React me mostra algum erro, não é possível ler a propriedade 'rootID' de null .
Se eu usar setTimeout execute ReactDOM.render, é trabalho. (Mesmo depois de 0ms)
Estou inseguro, alguém poderia me ajudar?
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 e 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
Todos 3 comentários
Você pode reproduzir seu problema em um jsfiddle? https://jsfiddle.net/L3zn8dws/
cpb
em 1 jun. 2016
A verdadeira questão é por que você está chamando ReactDOM.render de dentro de um método de ciclo de vida? Você está tentando montar um novo componente no nó em que o componente atual está montado, o que parece um antipadrão.
Você deve usar um componente pai raiz para gerenciar qual componente é renderizado, em vez de tentar remontá-lo na raiz. Se você absolutamente precisa ter várias raízes React (para as quais você deve ter uma boa razão), você deve usar algum tipo de sistema auxiliar para gerenciar isso:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Se você tiver várias raízes React, ou uma única raiz que é excluída com o tempo, recomendamos que você sempre crie sua própria API de wrapper. Todos eles parecerão um pouco diferentes dependendo da aparência do seu sistema externo. Por exemplo, no Facebook, temos um sistema que se conecta automaticamente ao nosso roteador de transição de página para chamar automaticamente unmountComponentAtNode.
Em vez de chamar ReactDOM.render() diretamente em qualquer lugar, considere escrever/usar uma biblioteca que gerencie a montagem e desmontagem em seu aplicativo.
aweary
em 1 jun. 2016
Isso parece um padrão sem suporte: você está tentando renderizar algo em um contêiner que já contém outro componente cujos ciclos de vida estão sendo executados no momento.
Se você quiser que B apareça, inclua <B /> da saída de renderização de A .
gaearon
em 27 out. 2016
Questões relacionadas
kocokolo
·
3Comentários
framerate
·
3Comentários
bloodyowl
·
3Comentários
vignestion
·
3Comentários
tleunen
·
3Comentários
Comentários muito úteis
A verdadeira questão é por que você está chamando
ReactDOM.renderde dentro de um método de ciclo de vida? Você está tentando montar um novo componente no nó em que o componente atual está montado, o que parece um antipadrão.Você deve usar um componente pai raiz para gerenciar qual componente é renderizado, em vez de tentar remontá-lo na raiz. Se você absolutamente precisa ter várias raízes React (para as quais você deve ter uma boa razão), você deve usar algum tipo de sistema auxiliar para gerenciar isso:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Em vez de chamar ReactDOM.render() diretamente em qualquer lugar, considere escrever/usar uma biblioteca que gerencie a montagem e desmontagem em seu aplicativo.