如何在非react第三方html中呈现多个react组件

Question

我正在集成一个非react第三方库，它在我的react应用程序中呈现自己的HTML。如何渲染我自己的react组件后加载到该HTML的DOM中。我尝试使用ReactDom.Render，它确实有效，但不在根上下文中。反复调用ReactDom.Render似乎也会导致性能问题。

Answer 1

我利用React服务器渲染并结合React水合物解决了这个问题

export function ConvertJSXtoHTMLWithCallback (id: string, element: JSX.Element) {
    const elem = ReactDOMServer.renderToString(element);

    return {
        html: `<div id='${id}'>${elem}</div>`,
        callback: () => { 
            const dom = document.querySelector(`#${id}`);
            if(dom) {
               ReactDOM.hydrate(element, dom);
            }
        
        }
    };
}