Ik heb een eenvoudige reactcomponent met een formulier erin:
var AddAppts = React.createClass({
handleClick: function() {
var title = this.refs.title.getDOMNode().value;
....
var appt = {
heading: title
...
}
CalendarActions.addAppointment(appt);
},
render: function() {
return (
<div>
<label>Description</label>
<input ref="title"></input>
...
</div>
);
}
});
module.exports = AddAppts;
Ik probeer deze component renderin een andere reactcomponent:
var AddAppt = require('./AddAppts');
render: function() {
return (
<div>
<AddAppt />
</div>
);
}
maar ik krijg deze foutmelding:
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.
Ik heb het gegoogled, maar kan er niet achter komen wat ik moet doen om dit probleem op te lossen.
Antwoord 1, autoriteit 100%
Dit is ter informatie voor mensen die react en redux-devtools gebruiken die het bericht van OP ontvangen. Uw structuur ziet eruit als
project
client
node_modules
react
redux-devtools
node_modules
react
De code in client vereist de eerste reactie-module; dat in redux-devtools de ander zal moeten reageren. De reactiemodule behoudt de status en gaat ervan uit dat deze alle status heeft.
Je krijgt het bericht van de OP omdat je status is verdeeld over de 2 reactiemodules. Deze situatie is waar ik denk dat @asbjornenge naar verwijst.
Ik bundelde de klantcode met webpack, dus ik gebruikte die om het probleem op te lossen. U kunt alle requireen importforceren om altijd de eerste reactie te gebruiken door het volgende toe te voegen aan webpack.config.js
module.exports = {
...
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},
extensions: ['', '.js']
},
...
);
Ik heb niet onderzocht wat ik zou moeten doen als de situatie zich voordeed met ontbundelde code op het knooppunt.
Antwoord 2, autoriteit 76%
Ik kwam deze fout tegen toen een componentmodule die ik gebruikte een eigen reactieafhankelijkheid had geïnstalleerd. Dus ik gebruikte meerdere versies van React.
Zorg ervoor dat u NIET reageert onder dependenciesin uw package.json.
Daarom hebben we peerDependencies😉
Antwoord 3, autoriteit 29%
Voor het geval dat. Houd rekening met de naam van de React-module die u gebruikt (deze is hoofdlettergevoelig). Ik heb dezelfde fout toen ik bij toeval probeerde om requireafhankelijkheid te laten reageren met verschillende namen in twee afzonderlijke modules.
//module1.js
var React = require('react');
...
//module2.js
var React = require('React');
....
Het werkt en geeft zelfs iets weer, maar de fout Alleen een ReactOwner kan refs hebben…verschijnt.
Antwoord 4, autoriteit 5%
Het herschikken van het script loste het probleem op.
Fout.
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/react-with-addons.js"></script>
Correct
<script src="./lib/react.js"></script>
<script src="./lib/react-with-addons.js"></script>
<script src="./lib/react-dom.js"></script>
Referentie https://github.com/gcanti/tcomb-form /issues/107#issuecomment-150891680
Antwoord 5, autoriteit 4%
Ik zag deze fout tijdens het ontwikkelen van een reactiemodule die was gekoppeld aan een testproject met behulp van de npm link. Overschakelen naar een reguliere afhankelijkheid loste het probleem op.
Het lijkt erop dat React npm linkniet leuk vindt.
Antwoord 6, autoriteit 2%
Er is een andere situatie.
Ik stel de React in als externe bibliotheek in de webpack.config.js en importeer react.js van cdnjs.
externals: {
'react': 'React'
}
Als ik een ui-bibliotheek gebruik, afhankelijk ben van React, zoals material-ui,react-bootstrap, deed dit probleem zich voor.
Antwoord 7
ik schrijf met mijn oude pen. zorg ervoor dat root-pakket.json in uw project de afhankelijkheid zo vroeg mogelijk verplaatst. krijg je nog steeds een probleem? & als u npm-modules en grunt-taak gebruikt, kunt u onderstaande schone taak toevoegen om interne componenten react (duplicaten) te verwijderen.
clean: {
react : ['node_modules/**/react','!node_modules/react']
},
Antwoord 8
Ik zag deze fout nadat ik mijn package.json-bestand een niveau hoger had geplaatst, dus ik had 2 node_modules-mappen in mijn project (één in ./node_modulesen een andere in ./web/node_modules). Het verwijderen van de oude map loste het probleem op.
Antwoord 9
Voor mij was de reden voor hetzelfde probleem dat ik de ReactDomglobaal heb geïmporteerd, als een eigenschap van het window-object, als volgt:
import ReactDOM from 'react-dom'
window.ReactDOM = ReactDOM
het verwijderen van window.ReactDOM = ReactDOMloste het probleem op.
Antwoord 10
Vergelijkbaar met dit antwoord, zag ik deze fout terwijl ik een afzonderlijke module gebruikte die ik in een afzonderlijke directory met behulp van yarn link.
De oplossing was om yarn unlink module-nameuit te voeren in de werkdirectory van mijn project. Ik heb vervolgens node_modulesverwijderd en voor de goede orde yarn upgrade module-nameen yarnuitgevoerd.
Antwoord 11
In plaats van
<input ref="title"></input>
Probeer dit
<input ref={(title) => this.title = title}></input>
Antwoord 12
Geen van de gegeven oplossingen werkte voor mij, hoewel ze me zeker hebben geholpen om te laten zien waar ik moet zoeken.
Om de een of andere reden heeft mijn project twee node_modulesmappen – één in de hoofdmap en één een niveau hoger. Ik ben nieuw bij React, dus ik weet niet of dit normaal is of zo. Ik ga gewoon mee met wat Visual Studio me gaf toen ik aan een nieuw project begon.
Hoe dan ook, ik wist welke module het probleem veroorzaakte, en het bestond toevallig alleen in éénvan de node_modules-mappen.
Ik heb de probleemmodule verplaatst naar de andere map node_modules. Probleem opgelost.