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

Question

所以我的技术主管提出了一个不寻常的要求。我基本上需要转换 returns 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 添加到元素的内容。

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

Answer 1

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

import ReactDOMServer from 'react-dom/server'

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

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

Turning a TSX/JSX React into a string or DOM element

javascript

reactjs

typescript

jsx

tsx