如何在非反应第三方 html 中渲染多个反应组件

Question

I am integrating a non-react 3rd party library that renders its own HTML inside my react app. How do a render my own react components post load into the DOM of that html. I have tried using ReactDOM.Render which does work but is not in my root context. It also seems to cause performance issues calling ReactDOM.Render over and over..

Answer 1

I have solved it by utilizing React Server rendering and combination with React Hydrate

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);
            }
        
        }
    };
}