Impossible de lire la propriété 'getHostNode' de null

Question

J'ai une application Horizon / Réagir avec un routeur de réaction et un simple bouton dans mon application:

 <Link className="dark button" to="/">Another Search</Link>
 

Lorsque je clique dessus, j'obtiens l'exception suivante:

 Uncaught TypeError: Cannot read property 'getHostNode' of null
 

L'erreur vient de:

 getHostNode: function (internalInstance) {
    return internalInstance.getHostNode();
},
 

Une idée pourquoi je reçois ça?

Answer 1

J'ai été confronté à un problème similaire. Il s'avère que, dans mon cas, était highlighthjs la suppression des commentaires de la dom.

Pour le texte, Réagissent 15 est l'ajout de commentaire avec le reactid au lieu d'une balise span, comme dans:

<!-- react-text: 248-->
Another Search
<!--/react-test-->

Pouvez-vous essayer quelque chose comme cela?

<Link className="dark button" to="/"><span>Another Search</span></Link>

Cela va forcer le générés DOM pour inclure la durée avec le bon data-reactid d'attribut.

Je voudrais déposer un problème avec réagissent-routeur, peut-être qu'ils peuvent le faire en interne, de sorte que vous n'aurait pas à se soucier d'elle. Mais il y a des problèmes avec le Lien de l'enfant pourrait être pratiquement n'importe quoi.

Answer 2

J'ai rencontré ce problème à plusieurs reprises au cours des derniers jours (nouveau à réagir) et dans presque tous les cas, il y avait une erreur de syntaxe / code qui n'a pas été intercepté ailleurs. Un exemple: si vous écrivez:

 getInitialState() {
    showModal: false
},
 

au lieu de:

 getInitialState() {
    return {
        showModal: false
    };
},
 

vous obtiendrez cette erreur. C'est à moins que votre processus de construction ne détecte pas déjà l'erreur. J'espère que cela aide quelqu'un (ou moi-même dans quelques jours. Hi Niyaz, you are welcome! ).

Answer 3

Pour moi, c'est une faute de frappe qui entraîne l'importation d'un composant à partir d'un mauvais module.

 import { Link, Icon } from 'react-router';
import { Tag } from 'antd';
 

CA devrait etre

 import { Link } from 'react-router';
import { Tag, Icon } from 'antd';
 

Answer 4

Je devais juste redémarrer mon backend nodemon.

Answer 5

Très intéressant :) pour moi, il s'est avéré que je ne consommais pas correctement les accessoires dans le composant enfant. Cela pourrait être utile pour quelqu'un.

 function Parent(){
    const styleEle = { width: '100px'};
    return (<div>
            <Child styleO={styleEle}/>
        </div>);
}

function Parent(props){
    // here i was directly using <div style={styleO}> causing issue for me
    return (<div style={props.styleO}>
            {'Something'}
        </div>)
}