什么是“只有 ReactOwner 可以有 refs."吝啬的? [英] What does 'Only a ReactOwner can have refs.' mean?

问题描述

我有一个简单的 react 组件，其中包含一个表单:

var AddAppts = React.createClass({句柄点击:函数(){var title = this.refs.title.getDOMNode().value;....无功应用= {标题:标题...}CalendarActions.addAppointment(appt);},渲染:函数(){返回 (<div><label>描述</label><input ref="title"></input>...

);}});module.exports = AddAppts;

我正在尝试在另一个 react 组件中render这个组件:

 var AddAppt = require('./AddAppts');渲染:函数(){返回 (<div><添加应用程序/>

);}

但我收到此错误:

 未捕获的错误:不变违规:addComponentAsRefTo(...):只有 ReactOwner 可以有 refs.这通常意味着您正在尝试向没有所有者的组件添加 ref(即，不是在另一个组件的 `render` 方法中创建的).尝试在一个新的顶级组件中渲染这个组件，该组件将保存 ref.

我用谷歌搜索过，但不知道我需要做什么来解决这个问题.

解决方案

这仅供使用 react 和 redux-devtools 的人使用，他们收到 OP 的消息.你的结构看起来像

项目客户节点模块反应redux-devtools节点模块反应

client 中的代码需要第一个 react 模块；在 redux-devtools 中将需要其他反应.react 模块保持状态并假设它拥有所有状态.

您收到 OP 的消息是因为您的状态在 2 个反应模块之间拆分.这种情况是我相信@asbjorenge 所指的.

我将客户端代码与 webpack 捆绑在一起，所以我用它来处理这个问题.您可以通过将以下内容添加到 webpack.config.js

来强制所有 require 和 import 始终使用第一个反应

module.exports = {...解决: {别名:{'react': path.join(__dirname, 'node_modules', 'react')},扩展名:['', '.js']},...);

我还没有研究过如果在 node 上运行的非捆绑代码发生这种情况我需要做什么.

I have a simple react component with a form in it:

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;

I am trying to render this component in another react component:

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

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

but I get this error:

 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.

I have googled it, but cannot figure out what I need to do to fix this issue.

解决方案

This is FYI for people using react and redux-devtools who are getting OP's message. Your structure looks like

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

The code in client will require the first react module; that in redux-devtools will require the other react. The react module keeps state and assumes it has all the state.

You get the OP's message because your state is split between the 2 react modules. This situation is what I believe @asbjornenge refers to.

I was bundling the client code with webpack, so I used that to handle the issue. You can force all require and import to always use the first react by adding the following to webpack.config.js

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

I have not looked into what I would need to do if the situation occurred with unbundled code running on node.

这篇关于什么是“只有 ReactOwner 可以有 refs."吝啬的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！