Que fait ‘Seul un ReactOwner peut avoir des références.’ signifier?

J’ai un composant de react simple avec un formulaire:

 var AddAppts = React.createClass({ handleClick: function() { var title = this.refs.title.getDOMNode().value; .... var appt = { heading: title ... } CalendarActions.addAppointment(appt); }, render: function() { return ( 
...
); } }); module.exports = AddAppts;

J’essaie de render ce composant dans un autre composant de react :

  var AddAppt = require('./AddAppts'); render: function() { return ( 
); }

mais j’ai cette erreur:

  Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref. 

Je l’ai googlé, mais je ne peux pas comprendre ce que je dois faire pour résoudre ce problème.

Il s’agit de FYI pour les personnes utilisant react et redux-devtools qui reçoivent le message de OP. Votre structure ressemble à

 project client node_modules react redux-devtools node_modules react 

Le code dans le client nécessitera le premier module de réaction; que dans redux-devtools, il faudra que l’autre réagisse. Le module de réaction conserve son état et suppose qu’il a tout l’état.

Vous obtenez le message de l’OP parce que votre état est divisé entre les 2 modules de réaction. Je pense que @asbjornenge se réfère à cette situation.

J’étais en train de regrouper le code client avec webpack, donc je l’ai utilisé pour gérer le problème. Vous pouvez forcer tous les require et les import à toujours utiliser la première réaction en ajoutant ce qui suit à webpack.config.js

 module.exports = { ... resolve: { alias: { 'react': path.join(__dirname, 'node_modules', 'react') }, extensions: ['', '.js'] }, ... ); 

Je n’ai pas examiné ce que je devrais faire si la situation se produisait avec du code dégroupé s’exécutant sur le nœud.

J’ai rencontré cette erreur lorsqu’un module de composant que j’utilisais avait sa propre dépendance de réaction installée. Donc, j’utilisais plusieurs versions de React.

Assurez-vous de ne pas lister les réactions sous les dependencies dans votre package.json .
C’est pourquoi nous avons des peerDependencies 😉

Au cas où. Soyez conscient du nom du module React que vous utilisez (il est sensible à la casse). J’ai la même erreur lorsque, par hasard, j’ai essayé d’ require dépendance de React avec des noms différents dans deux modules distincts.

 //module1.js var React = require('react'); ... //module2.js var React = require('React'); .... 

Cela fonctionne et rend même quelque chose mais l’erreur Seul un ReactOwner peut avoir des refs … apparaît.

La réorganisation du script a résolu le problème.

Faux.

    

Correct

    

Référence https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

J’ai vu cette erreur lors du développement d’un module de réaction lié à un projet de test utilisant le npm link . Passer à une dépendance régulière a résolu le problème.

Il semble que React n’aime pas le npm link .

Il y a une autre situation.

Je mets le React en tant que bibliothèque externe dans le fichier webpack.config.js et importe le fichier React.JS de CDNJS.

 externals: { 'react': 'React' } 

Lorsque j’utilise une bibliothèque ui dépend de React, tel que material-ui, react-bootstrap, ce problème s’est produit.

J’écris avec mon vieux stylo. assurez-vous que dans votre package root, package.json move réagit le plus tôt possible. encore vous obtenez le problème? & Si vous utilisez des modules npm et des tâches difficiles, vous pouvez append une tâche propre pour supprimer les composants internes (doublons).

clean: { react : ['node_modules/**/react','!node_modules/react'] },

J’ai vu cette erreur après avoir déplacé mon fichier package.json à un niveau, donc j’avais 2 répertoires node_modules (un dans ./node_modules et un autre dans ./web/node_modules ). Supprimer l’ancien répertoire a résolu le problème.

Pour moi, la raison du même problème est que j’ai importé le ReactDom globalement, en tant que propriété de l’object window, comme ceci:

 import ReactDOM from 'react-dom' window.ReactDOM = ReactDOM 

supprimer window.ReactDOM = ReactDOM résolu le problème.

Semblable à cette réponse , je voyais cette erreur en utilisant un module séparé que j’avais développé dans un répertoire séparé en utilisant le yarn link .

La solution consistait à exécuter yarn unlink module-name dans le répertoire de travail de mon projet. J’ai ensuite supprimé node_modules et lancé le yarn upgrade module-name yarn et le yarn pour faire bonne mesure.

Au lieu de

  

Essaye ça

  this.title = title}>