Reactjs 在web组件内导入和运行独立的React应用程序

我有一个独立的React应用程序，它使用webpack绑定，要求能够在web组件中运行此绑定。有人能建议我应该如何处理这个问题吗

我的想法是：

//webpack.config.js
output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        library: 'reactUmd',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },

//react-component.js
import '../../packages/react-umd/dist/bundle.js'

class ReactComponent extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    reactUmd.renderSomeComponentTo(mountPoint)
  }
}

customElements.define('react-component', ReactComponent)

---

但我不确定如何导入已编译的捆绑包并获取React、ReactDOM、主组件等的引用，作为UMD导出是否会提供我需要的引用？

因此，您基本上希望在缩小的捆绑包文件之外访问React组件

以下是一种方法：

• 您告诉webpack为您的文件创建一个。这将基本上创建一个全局变量，您可以使用它从js条目文件访问所有导出的函数。 为此，在

  output

  object下添加一个名为

  library

  intyourWebpackConfig的键

  module.exports={
  条目：'./main.js'，
  输出：{
  库：“someLibName”
  },
  ...
  }
  

• 完成此操作后，重新启动webpack服务器，并在控制台上键入window.someLibName。这应该将

  main.js

  导出的所有方法打印为对象

• 下一步是创建一个函数，该函数接受DOM元素和。该函数将如下所示：

  export const renderSomeComponentTo=（mountNode）=>{
  返回ReactDOM.render（，MOUNT_节点）；
  }
  

• 现在，您可以从项目中的任何位置使用

  const mountNode=document.getElementById（'theNodeID'）；
  window.someLibName.renderSomeComponentTo（mountNode）
  

这样，所有特定于react的代码都被抽象：）

---

我希望我回答了你的问题。别忘了投明星票。干杯嘿Rahul，我试着按照你的步骤做，但没有成功，我在我的网页配置中添加了额外的属性：library:reactUmd，libraryTarget:umd，umdNamedDefine:true我在react项目中创建了一个名为renderSomeComponentTo的函数，该函数将获取mountNode问题是，当我尝试调用reactUmd.renderSomeComponentTo（mountNode）时，我得到了错误未捕获类型错误：reactUmd.renderSomeComponentTo不是一个函数，我在console.log时用最新版本更新了这个问题（window.reactUmd）我只看到对象{uuu esModule:true}，我似乎没有访问任何函数的权限。嘿，Rahul，我已经成功地将我的react组件导入到web组件中-我现在遇到的问题是，我在组件中没有react绑定？你能更具体地说明这个问题吗？什么类型的react绑定？你能将错误粘贴到这里吗？