javascript - #REACT 将 JSX.Element 转换为 HTMLElement

Question

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

在我的情况下，我想使用一个包含简单 div 的 var 并将其导出为图像，但有一个问题:我的 var(节点)是 JSX.Element 并且库的“toPng”方法接受为一个 HTMLElement 参数。

我知道库的文档建议使用这样的方法来获取 HTMLElement:var node = document.getElementById('my-node') 但在我的情况下我不能这样做是因为我的节点不在文档中。

那么有办法将 JSX.Element 转换为 HTMLElement 吗？在此先感谢 ;)

Answer 1

使用 renderToStaticMarkup 来做到这一点。

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

const output = document.createElement("div")
const staticElement = renderToStaticMarkup(reactElement))
output.innerHTML = `<div>${staticElement}</div>`