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}>