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

编程问答 2022-05-18

问题描述

所以我的技术负责人提出了一个不寻常的要求。我基本上需要转换一个返回 JSX 的回调并将输出转换为 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>
      );
    }

我们的想法是能够在内部使用此回调时，将其转换为可以通过危险的SetInnerHTML 将其添加到元素中的内容。

我尝试了多种方法和方法，但我的方法尚未获得批准。所以我转向你，看看有没有办法做到这一点。

解决方法

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

import ReactDOMServer from 'react-dom/server'

const htmlString = ReactDOMServer.renderToStaticMarkup(
    <div>
         <Component/>
         /* etc. */
    </div>
);
javascriptjsxjsxjsxreactjsreactjsreactjsreactjstsxtypescripttypescripttypescript