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..
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);
}
}
};
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.