React: Re-rendre l'élément dans componentDidMount à la fois Erreur : Impossible de lire la propriété 'rootID' de null.

Créé le 10 mai 2016 · 3Commentaires · Source: facebook/react

Je fais ReactDOM.render #container element(top-level) dans la fonction componentDidMount, React me montre une erreur, Impossible de lire la propriété 'rootID' de null .
Si j'utilise setTimeout, exécutez ReactDOM.render, ça marche. (Même après 0 ms)
Je me sens incertain, quelqu'un pourrait-il m'aider?

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')
);

Source

h1orz

Commentaire le plus utile

La vraie question est pourquoi appelez-vous ReactDOM.render depuis une méthode de cycle de vie ? Vous essayez de monter un nouveau composant sur le nœud sur lequel le composant actuel est monté, ce qui ressemble à un anti-modèle.

Vous devez utiliser un composant parent racine pour gérer le rendu du composant, au lieu d'essayer de le remonter à la racine. Si vous devez absolument avoir plusieurs racines React (pour lesquelles vous devriez avoir une très bonne raison), vous devriez utiliser une sorte de système d'assistance pour gérer ceci :

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

Si vous avez plusieurs racines React ou une seule racine qui est supprimée au fil du temps, nous vous recommandons de toujours créer votre propre API wrapper. Ceux-ci auront tous un aspect légèrement différent en fonction de l'apparence de votre système externe. Par exemple, chez Facebook, nous avons un système qui se connecte automatiquement à notre routeur de transition de page pour appeler automatiquement unmountComponentAtNode.

Plutôt que d'appeler ReactDOM.render() directement partout, pensez à écrire/utiliser une bibliothèque qui gérera le montage et le démontage au sein de votre application.

aweary le 1 juin 2016

👍2 🎉1

Tous les 3 commentaires

Pouvez-vous reproduire votre problème dans un jsfiddle ? https://jsfiddle.net/L3zn8dws/

cpb le 1 juin 2016

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

Si vous avez plusieurs racines React ou une seule racine qui est supprimée au fil du temps, nous vous recommandons de toujours créer votre propre API wrapper. Ceux-ci auront tous un aspect légèrement différent en fonction de l'apparence de votre système externe. Par exemple, chez Facebook, nous avons un système qui se connecte automatiquement à notre routeur de transition de page pour appeler automatiquement unmountComponentAtNode.

Plutôt que d'appeler ReactDOM.render() directement partout, pensez à écrire/utiliser une bibliothèque qui gérera le montage et le démontage au sein de votre application.

aweary le 1 juin 2016

👍2 🎉1

Cela semble être un modèle non pris en charge : vous essayez de restituer quelque chose dans un conteneur qui contient déjà un autre composant dont les cycles de vie sont en cours d'exécution.

Si vous voulez que B apparaisse, incluez <B /> partir de la sortie de rendu de A .