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

Question

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

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

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

codepen 可以工作，但不处理 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>
);