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

Question

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

Uncaught Invariant Violation: addComponentAsRefTo(...): 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, or you have multiple copies of React loaded

我花了一整天的时间尝试了一些 hack，但我无法找到问题的确切根源？

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

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

and for getting the reference use 
this.menuList

只有 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

javascript

bundling-and-minification

reactjs

webpack

npm-install