#REACT Преобразование JSX.Element в HTMLElement

Question

Я хочу использовать эту библиотеку для своего проекта реакции js https://www.npmjs.com/package/html-to-image.

В моем случае я хочу использовать переменную, содержащую простой div, и экспортировать ее как изображение, но есть проблема: мой var (node) - это JSX.Element, а метод "toPng" библиотеки принимает в качестве параметра HTMLElement.

введите описание изображения здесь

Я знаю, что do c библиотеки предлагает использовать такие методы, чтобы получить HTMLElement: var node = document.getElementById('my-node'), но в моем случае я не могу сделать что-то подобное, потому что мой узел не нет в документе.

Итак, есть способ преобразовать JSX.Element в HTMLElement? Заранее спасибо;)

Answer 1

Для этого используйте renderToStaticMarkup.

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

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