Javascript shadowdom和ReactJS

我正在应用程序中使用web组件。在web组件中，我需要插入一个react组件。Web组件具有阴影DOM。当我尝试使用以下命令渲染react组件时，我得到了错误

comp = React.createElement(ReactElem, {
    config: config,
    onRender: handleRender
});

ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));

错误

---

我尝试使用Web组件API的

内容

，但它在组件的顶部而不是内部呈现。如何使React组件在shadow DOM中渲染？

如果要将其插入web组件的shadow DOM中，请首先选择该组件（例如，使用

querySelector

），然后选择其包含的阴影（

shadowRoot

）。简化示例：

//创建React元素。
类示例扩展了React.Component{
onClick（）{
console.log（'Shadow！'）
}
render（）{
返回(
你好，世界！
);
}
}
//创建包含目标div的web组件。
const container=document.createElement（'app'）；
文件.正文.附件（容器）；
//将阴影根添加到组件。
const shadow=document.querySelector（'app'）.attachShadow（{mode:'open'}）；
//选择web组件，然后选择shadowRoot。
const target=document.querySelector（'app'）.shadowRoot；
ReactDOM.render（，目标）

即使它使用阴影DOM，您也可以获取生成的HTML并将其加载到那里，或者我在这里遗漏了什么？什么是“app1”？你是说
“#app1”
？@Supersharp它是一个web组件。不..它是div#app1…我的错..它基本上在阴影中。你看到了吗？这是一个Web组件和React组件如何互操作的示例。问题是，
React
无法执行所有操作，如单击不起作用。而且可能有多个组件实例，这样我需要调用每个地方
onClick
为我工作，更新我的答案。你说“到处打电话”是什么意思？每次都必须使用
ReactDOM
进行渲染？谢谢。发现我犯了一个小错误。我的DOM在阴影中下降了2级，插槽元素仅在一个位置提到仅供参考：
target container is not a dom element