Что означает «Только у ReactOwner могут быть ссылки». имею в виду?

У меня есть простой компонент react с формой в нем:

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

Я пытаюсь render этот компонент в другом компоненте react :

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

но я получаю эту ошибку:

  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.

Я искал его, но не могу понять, что мне нужно сделать, чтобы исправить эту проблему.

Это FYI для людей, использующих реагирующие и redux-devtools, которые получают сообщение OP. Ваша структура выглядит так:

 project client node_modules react redux-devtools node_modules react

Код в клиенте потребует первого реактивного модуля; что в redux-devtools потребуется другое реагировать. Реактивный модуль сохраняет состояние и предполагает, что он имеет все состояние.

Вы получаете сообщение OP, потому что ваше состояние разделено между 2 реактивными модулями. Эта ситуация – то, на что я полагаю, что @asbjornenge ссылается.

Я связывал клиентский код с webpack, поэтому я использовал его для решения проблемы. Вы можете заставить все require и import всегда использовать первый ответ, добавив следующее в webpack.config.js

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

Я не рассматривал то, что мне нужно было бы сделать, если бы возникла ситуация с разукрупненным кодом, запущенным на узле.

Я столкнулся с этой ошибкой, когда компонентный модуль, который я использовал, установил собственную зависимую зависимость. Поэтому я использовал несколько версий React.

Удостоверьтесь, что НЕ укажете, как реагировать на dependencies в вашем package.json .
Вот почему у нас есть peerDependencies 😉

На всякий случай. Помните имя используемого модуля React (он чувствителен к регистру). У меня такая же ошибка, когда по совпадению я пытался require зависимости React с разными именами в двух отдельных модулях.

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

Он работает и даже делает что-то, но у Only a ReactOwner могут быть исправлены ошибки … появляется ошибка.

Реорганизация сценария решила проблему.

Неправильно.

Верный

Ссылка https://github.com/gcanti/tcomb-form/issues/107#issuecomment-150891680

Я видел эту ошибку при разработке реактивного модуля, который был связан с тестовым проектом с использованием npm link . Переключение на обычную зависимость решило проблему.

Кажется, что React не нравится npm link .

Есть и другая ситуация.

Я установил React как внешнюю библиотеку в файле webpack.config.js и импортировал response.js из cdnjs.

 externals: { 'react': 'React' }

Когда я использую библиотеку ui, зависит от React, такого как material-ui, response-bootstrap, эта проблема возникла.

Я пишу с моей старой ручкой. убедитесь, что в корневом пакете project.json проекта вы можете реагировать на зависимость как можно раньше. все еще вы получаете проблему? & если вы используете модули npm и задачу grunt, вы можете добавить ниже чистую задачу, чтобы удалить внутренние компоненты (дубликаты).

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

Я видел эту ошибку после того, как я переместил файл package.json на уровень, поэтому у меня было два node_modules в моем проекте (один в ./node_modules и другой в ./web/node_modules ). Исправлена проблема с удалением старого каталога.

Для меня причиной той же проблемы было то, что я импортировал ReactDom глобально, как свойство объекта window, например:

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

удаление window.ReactDOM = ReactDOM исправил проблему.

Подобно этому ответу , я видел эту ошибку, используя отдельный модуль, который я разрабатывал в отдельном каталоге, используя yarn link .

Решение заключалось в том, чтобы запускать yarn unlink module-name в рабочем каталоге моего проекта. Затем я удалил node_modules и запустил yarn upgrade module-name и yarn для yarn upgrade module-name качества.

Вместо

Попробуй это