只有 ReactOwner 可以有 refs。您可能正在向未在组件的 render 方法中创建的组件添加 ref答案

【问题标题】：Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method只有 ReactOwner 可以有 refs。您可能正在向未在组件的 render 方法中创建的组件添加 ref
【发布时间】：2016-06-27 12:06:50
【问题描述】：

我已经编写了一个独立的组件，如果我将此组件作为独立组件运行，它可以正常工作。我想将此组件作为 NPM 模块发布，以便我可以共享此组件。在我的示例应用程序中，我在 package.json 中定义了模块的路径，并且它被 NPM 很好地拉下。我正在使用 webpack 进行捆绑，它成功构建了包，但是当我在浏览器中运行代码时，我得到了

未捕获的不变违规：addComponentAsRefTo(...): 只有一个 ReactOwner 可以有 refs。您可能正在向组件添加 ref 不是在组件的渲染方法中创建的，或者你有加载了多个 React 副本

我花了一整天的时间尝试了一些技巧，但我无法找到问题的确切根本原因？

【问题讨论】：

你可以使用多个版本的 react。检查 node_modules 中的模块并确保
我检查了react版本，react版本没有问题。我在我的反应组件中使用 ref 进行 dom 遍历。
我认为多米尼克的意思是你可能有多个反应实例。您的帖子似乎表明该组件是独立的-您的意思是它包括反应并呈现自己吗？如果是这样，那么如果您在 React 项目中使用它可能就是问题所在。

标签： javascript reactjs webpack bundling-and-minification npm-install

【解决方案1】：

在您的 webpack 配置中，在外部配置中使用它，例如：

output: {
    path: __dirname + "/dist",
    filename: 'bundle.js',
    // library: 'hello-007',
    libraryTarget: 'umd',
  },
  externals: [{
    'react': {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
  }, {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }],   
   module : {
    loaders : [
      {
        test : /\.js?/,
        loader : 'babel'
      }
    ]
  },

【讨论】：

【解决方案2】：

还有其他方法可以在代码中使用 ref 来解决这个问题。像这样使用 ref

<div className="nav-window-content"
          ref={(node) => this.menuList = node}>

and for getting the reference use 
this.menuList

【讨论】：