将TSX/JSX React转换为字符串或DOM元素

Question

所以我的技术主管有一个不同寻常的要求。我基本上需要打开一个返回JSX的回调，并将输出转换为HTMLElement或字符串。

问题是，我们正在构建一个可重用的、低级别的无限滚动组件，该组件重用DOM，因此组件上只存在20个DOM元素。这是我收到的PoC的代码笔：

https://codepen.io/hemant30/pen/rNWQEZy?editors=0010

代码笔可以工作，但不处理React中的任何内容，它纯粹是DOM操作。

组件接收到的回调如下：

(data: any) => {
return (
<div key={data.id}>
{data.id} - {data.name}
<br />
<a href="#">Text</a>
</div>
);
}

这样做的目的是，当在内部使用此回调时，能够将其转换为可以通过dangerouslySetInnerHTML添加到元素中的内容。

我尝试了很多东西和方法，但我的方法没有得到批准。所以我求助于你，看看是否有办法做到这一点。

Answer 1

您可以检查renderToStaticMarkup方法，它可以将jsx转换为字符串html。

import ReactDOMServer from 'react-dom/server'
const htmlString = ReactDOMServer.renderToStaticMarkup(
<div>
<Component/>
/* etc. */
</div>
);