时间戳

首页 > 解决方案 > 尝试将我从服务器获得的 HTML 代码转换为 Image ，但在 ReactJS 中给了我一个错误

javascript - 尝试将我从服务器获得的 HTML 代码转换为 Image ，但在 ReactJS 中给了我一个错误

问题描述

这基本上是一个自动在社交媒体上发布帖子的应用程序。我有一个存储在后端的垂直“Cablgram”的社交媒体帖子模板，该请求为我提供了该模板的 HTML 代码。当我尝试将该图像转换为图像（使用 domtoimage 库）以便显示它时，我收到此错误：dom-to-image.js:191 Uncaught (in promise) TypeError: node.cloneNode is not a功能。

import './Dashboard.css';
import { useEffect, useState } from 'react'
import { Grid, Image } from 'semantic-ui-react'
import axios from 'axios'
import domtoimage from 'dom-to-image'
import parse from 'html-react-parser'

function Dashboard(props) {
    let [posts, setPosts] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

    function retain(unsafe) {
        return unsafe
            .replaceAll("&lt;", ' <')
            .replaceAll("&gt;", ' > ')
    }

    async function getPosts() {
        let { data } = await axios.post('http://localhost:3000/templates/get', { vertical_name: 'cablgram' })
        let articles = data.articles

        let article_htmls = articles.map(async (code) => {
            const html = retain(code)
            const actual_html = parse(html)
            const url = await domtoimage.toPng(wrapper)
            return url
        })

        setPosts(article_htmls)
    }

    useEffect(() => {
        getPosts()
    }, [])

    return (
        <div className="Dashboard page-container">
            <div className="title-container">
                <h1 className="title">Atlas</h1>
            </div>

            <div className="subtitle-container">
                <span className="subtitle">Curated news from contemporary culture.</span>
            </div>

            <div className="dashboard-grid-container">
            <Grid columns={3}>
                { 
                    posts.map((post, index) => (
                        <Grid.Column key={index}>
                            {post}
                        </Grid.Column>
                    ))
                }
            </Grid>
            </div>
        </div>
    )
  }
  
  export default Dashboard

有人可以向我解释什么是错的，我该如何解决这个问题？

标签： javascriptreactjs

解决方案

试试这个：

// Syntax:
let newClone = node.cloneNode([deep])

// Example:
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)

推荐阅读