将 JSX.Element 转换为 HTMLElement

Question

我想将此库用于我的 React js 项目https://www.npmjs.com/package/html-to-image。

就我而言，我想使用一个包含简单 div 的 var 并将其导出为图像，但有一个问题：我的 var （节点）是 aJSX.Element并且库的“toPng”方法接受 an 参数HTMLElement。

我知道库的文档建议使用这样的方法来获取 HTMLElement：var node = document.getElementById('my-node')但就我而言，我无法执行这样的操作，因为我的节点不在文档中。

那么有办法将 JSX.Element 转换为 HTMLElement 吗？提前致谢 ;）

Answer 1

为此，请使用库renderToStaticMarkup中的内容react-dom/server。

import { renderToStaticMarkup } from "react-dom/server"

const output = document.createElement('p')
const staticElement = renderToStaticMarkup(reactElement)
output.innerHTML = staticElement