在 React 项目中集成 Web 组件

Question

我正在尝试将 Web 组件集成到我的项目中。我没有将我的外部 JS 文件添加到 index.html，因为我需要将大约 10 个 Web 组件集成到我的 React 项目中。

我创建了一个脚本，并将 JS 脚本加载到各个组件中。

export function loadScript(src, id) {
  return new Promise((resolve, reject) => {
    var tag = document.createElement("script");
    tag.src = src;
    tag.id = id;
    tag.className = id;
    tag.async = true;
    tag.onload = () => {
      // @ts-ignore
      resolve();
    };
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    // }
  });
}

将脚本添加到 index.html 并在组件卸载后将其删除。

export default function Home() {
  useEffect(() => {
    loadScript(
      "https://rjspencer.github.io/r2wc-checklist/static/js/main.js",
      "r2wc-checklist"
    );

    return () => {
      var head = document.getElementsByTagName("head")[0];
      var scripts = head.getElementsByClassName("r2wc-checklist");
      if (scripts.length > 0) {
        head.removeChild(scripts[0]);
      }
    };
  }, []);

  return (
    <div className="home">
      Home
      <r2wc-checklist items='[{"label":"First Thing","isChecked":false}]' />
    </div>
  );
}

但是，我收到以下错误 在 Microsoft Edge

中

无法删除 [object Object] 的属性“__reactFiber$gy95aiugunt”

在 Firefox 中

CustomElementRegistry.define: 'r2wc-checklist' 已经定义为自定义元素

请帮我解决这个问题。 谢谢