Javascript 如何将React组件附加到html元素I？

我正在使用模式库winbox。如果使用简单的html和javascript，效果会很好。但我不能向它附加React节点

模态有一个

html

参数，该参数接受html字符串，例如

div.innerHTML=hello

。代码源是：

this.body.innerHTML=html

因此，添加一个经典的React元素会导致模态崩溃。我找到的唯一解决方案是使用react-dom的
renderToString
方法：
html:renderToString（children）
。但是组件不再是动态的（没有状态更新等）

我还尝试在modal中用一个div包围
React.renderDOM
，并将组件附加到它，因为应用程序附加到index.js的
#root
div


html：
{渲染(
,
文档查询选择器（“模态”）
)},
您可以使用npm提供的winbox react软件包。下面给出了示例代码。您可以将普通jsx用作WinboxReact组件的子级

const Hero = () => {
const [show, setShow] = useState(false)
const clickHandeler = () => {
  setShow(!show)
}

return (
  <div className='text-center'>
    {show && (
      <WinboxReact
        onClose={clickHandeler}
        background='linear-gradient(90deg, rgba(49,36,239,1) 0%, rgba(67,0,168,1) 100%)'
      ><h1>Hello</h1></WinboxReact>
    )}
    <button onClick={clickHandeler} className='btn btn-custom btn-lg mt-4'>
      Show Example
    </button>
  </div>
)
}

export default Hero

consthero=（）=>{
const[show，setShow]=useState（false）
常量ClickHandler=（）=>{
设置显示（！show）
}
返回(
{show&&(
你好
)}
以身作则
)
}
导出默认英雄
老实说，我宁愿放弃WinBox，而选择设计用于React的产品。我实际上使用winbox，因为它处理全屏、大小调整、缩小、屏幕底部缩小模态的自动定位以及多个实例。所有这些LIB都只是带有背景的经典情态动词。我可以自己做。只共享一个链接可能会有所帮助，但并不可取，因为链接可能会在将来删除。在你的答案中分享一些代码和例子将提高你答案的质量。