React: Vuelva a renderizar el elemento en el componenteDidMount a la vez Error: no se puede leer la propiedad 'rootID' de nulo.

Creado en 10 may. 2016 · 3Comentarios · Fuente: facebook/react

Hago ReactDOM.render #container element (nivel superior) en la función componentDidMount, React me muestra algún error, no se puede leer la propiedad 'rootID' de null .
Si uso setTimeout, ejecuta ReactDOM.render, funciona. (Incluso después de 0ms)
Me siento indeciso, ¿alguien podría ayudarme?

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 y 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>
        )
    }
});

aplicación.jsx:

ReactDOM.render(
    <A />,
    document.getElementById('container')
);

Fuente

h1orz

Comentario más útil

La verdadera pregunta es ¿por qué está llamando a ReactDOM.render desde dentro de un método de ciclo de vida? Está intentando montar un nuevo componente en el nodo en el que está montado el componente actual, lo que parece un antipatrón.

Debe usar un componente principal raíz para administrar qué componente se procesa, en lugar de intentar volver a montarlo en la raíz. Si absolutamente tiene que tener múltiples raíces de React (para lo cual debería tener una muy buena razón), debería usar algún tipo de sistema de ayuda para administrar esto:

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

Si tiene varias raíces de React, o una sola raíz que se elimina con el tiempo, le recomendamos que siempre cree su propia API contenedora. Todos estos se verán ligeramente diferentes dependiendo de cómo se vea su sistema externo. Por ejemplo, en Facebook tenemos un sistema que se vincula automáticamente con nuestro enrutador de transición de página para llamar automáticamente a unmountComponentAtNode.

En lugar de llamar a ReactDOM.render() directamente en todas partes, considere escribir/usar una biblioteca que administre el montaje y desmontaje dentro de su aplicación.

aweary en 1 jun. 2016

👍2 🎉1

Todos 3 comentarios

¿Puedes reproducir tu problema en un jsfiddle? https://jsfiddle.net/L3zn8dws/

cpb en 1 jun. 2016

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

Si tiene varias raíces de React, o una sola raíz que se elimina con el tiempo, le recomendamos que siempre cree su propia API contenedora. Todos estos se verán ligeramente diferentes dependiendo de cómo se vea su sistema externo. Por ejemplo, en Facebook tenemos un sistema que se vincula automáticamente con nuestro enrutador de transición de página para llamar automáticamente a unmountComponentAtNode.

En lugar de llamar a ReactDOM.render() directamente en todas partes, considere escribir/usar una biblioteca que administre el montaje y desmontaje dentro de su aplicación.

aweary en 1 jun. 2016

👍2 🎉1

Esto parece un patrón no admitido: está tratando de representar algo en un contenedor que ya contiene otro componente cuyos ciclos de vida se están ejecutando actualmente.

Si desea que aparezca B , incluya <B /> de la salida de representación de A .