javascript - 只有 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'
      }
    ]
  },