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

【问题标题】：Turning a TSX/JSX React into a string or DOM element将 TSX/JSX React 转换为字符串或 DOM 元素
【发布时间】：2021-06-14 03:05:40
【问题描述】：

所以我的技术主管提出了一个不同寻常的要求。我基本上需要转一个返回 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>
      );
    }

我们的想法是，当在内部使用这个回调时，可以将它变成可以通过 dangerouslySetInnerHTML 添加到元素的东西。

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

【问题讨论】：

这是一个真正的“亲爱的上帝为什么”问。你不能把整个代码都转换成 React 吗？
我愿意，但显然这个组件需要非常高效，而公司之前的尝试在使其既可用又高效方面并不成功。

标签： javascript reactjs typescript jsx tsx

【解决方案1】：

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

import ReactDOMServer from 'react-dom/server'

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

【讨论】：