我的应用程序中有多个React副本

Question

我使用react-treelist组件，在其中我使用office-ui-fabric callout(它类似于工具提示)组件在树结构中的元素上有一个工具提示。当我运行这个程序时，它运行正常，但当我在我的项目中捆绑和使用捆绑文件作为模块时，它给出错误：-

Layer.componentDidUpdate()中出现异常:不变冲突: addComponentAsRefTo(...)：只有ReactOwner才能有refs。您可能正在向不是在组件的render方法中创建的组件添加引用，或者加载了React的多个副本

我尝试了很多来自diff论坛的解决方案，但没有一个有效，我确信问题出在react的多个副本。

我所做的事情的细节

我从github克隆了react-treelist，然后我安装了office-ui-fabric模块，然后我更改了一些代码，使callout组件与react-treelist一起工作，我做了npm启动，它工作正常。我做npm运行dist，并将捆绑文件复制到名为react-treelist的文件夹中的项目目录中，然后将该文件作为模块导入我的代码中，并运行它给我的上述错误的代码。

有没有人可以建议我如何在我的应用程序中没有多个react副本的情况下完成上述任务

Answer 1

如果您使用webpack构建应用程序，则可以使用resolve.alias configuration option来确保所有模块都引用相同的react库：

  resolve: {
    alias: {
      'react': fs.realpathSync('node_modules/react'),
      'react-dom': fs.realpathSync('node_modules/react-dom')
    }
  }

Answer 2

如果你使用web pack，那么你可以通过将以下内容添加到Webpack配置中来修复它

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
}