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

标签 javascript reactjs dom

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

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

enter image description here

enter image description here

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

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

最佳答案

使用 renderToStaticMarkup 来做到这一点。

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

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

关于javascript - #REACT 将 JSX.Element 转换为 HTMLElement,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63214239/

相关文章:

javascript - Protractor,检查元素的目标 "_blank"

javascript - 如何使用 jQuery/js 打开多个窗口并触发表单提交事件?

javascript - Apollo-client (react) - 创建突变的更新 - "Can' t 在对象 (ROOT_QUERY) 上找到字段 Fund({})"

javascript - 如何使用 javascript d3 打开一个 json 文件?

javascript - 迭代表列并构建 JSON - jQuery

javascript - 使用 d3 从 `multiple` 下拉菜单中查找用户选择的选项?

javascript - 通过触摸事件实时检查谷歌地图中的边界变化

javascript - 使用循环在 react 中创建元素

javascript - 更新 api 调用 React 中的设置状态

php - xpath 排除具有类的元素