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

Question

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

未捕获的不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。 您可能正在向组件的render方法中未创建的组件添加ref，或者您有多个React副本已加载

我花了一整天时间尝试过几次黑客攻击，但是我无法找到问题的确切根本原因？

Answer 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'
      }
    ]
  },

Answer 2

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

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

and for getting the reference use 
this.menuList