我的应用程序中

Question

我正在使用react-treelist组件，我正在使用office-ui-fabric标注（它像工具提示）组件在树结构中的元素上有工具提示当我运行此程序时它正确运行但是当我运行时我在项目中捆绑和使用捆绑文件作为模块，它给出了错误： -

Layer.componentDidUpdate（）中的异常：不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在为未在组件的render方法中创建的组件添加引用，或者您有多个React已加载的副本

我尝试过很多来自差异论坛的解决方案，但没有一个有效。我相信问题是多个反应副本。

我做的详情

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

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

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'
}