Что означает "Только у 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 (
            <div>
                <label>Description</label>
                <input ref="title"></input>
                ...
            </div>
        );
    }
});
module.exports = AddAppts;

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

  var AddAppt = require('./AddAppts');

  render: function() {
    return (
      <div>
        <AddAppt />
      </div>
    );
  }

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

 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 `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

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

Ответ 1

Это 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']
  },
  ...
);

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

Ответ 2

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

Убедитесь, что в списке package.json в списке dependencies не указывается ответ в dependencies.
Вот почему мы имеем peerDependencies; -)

Ответ 3

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

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

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

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

Ответ 4

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

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

<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/react-with-addons.js"></script>

Правильно

<script src="./lib/react.js"></script>
<script src="./lib/react-with-addons.js"></script>
<script src="./lib/react-dom.js"></script>

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

Ответ 5

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

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

Ответ 6

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

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

externals: {
  'react': 'React'
}

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

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