reactjs - 'Only a ReactOwner can have refs.'是什么意思？

Question

我有一个简单的 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;

我正在尝试在另一个 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's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

我已经用谷歌搜索了它，但无法弄清楚我需要做什么来解决这个问题。

Answer 1

这是供使用 React 和 Redux-devtools 并收到 OP 消息的人引用的。你的结构看起来像

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

客户端中的代码将需要第一个react模块；在 redux-devtools 中，这将需要其他的 react 。 React 模块保留状态并假设它拥有所有状态。

您收到 OP 的消息是因为您的状态分为 2 个 react 模块。我相信@asbjornenge 指的是这种情况。

我将客户端代码与 webpack 捆绑在一起，所以我用它来处理这个问题。您可以通过将以下内容添加到 webpack.config.js 来强制所有 require 和 import 始终使用第一个 React

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

我还没有研究如果在节点上运行非捆绑代码时发生这种情况我需要做什么。