[英]How do I render multiple react components in non-react 3rd party html
我正在集成一个非反应的第 3 方库,它在我的反应应用程序中呈现它自己的 HTML。 如何渲染我自己的反应组件后加载到 html 的 DOM 中。 我尝试过使用 ReactDOM.Render,它确实有效,但不在我的根上下文中。 它似乎还会导致性能问题一遍又一遍地调用 ReactDOM.Render ..
我已经通过使用 React Server 渲染和结合 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);
}
}
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.