如何在 Next JS 应用程序中将字符串转换为 HTML 元素？

Question

如何在 Next JS 应用程序中将字符串转换为 HTML 元素？

Aka*_*iya 11 html javascript node.js reactjs next.js

我已将产品描述作为 HTML 元素保存到数据库中，如下所示。但是当我将此数据渲染到 div 中时，它显示为字符串。我想在我的Next JS 应用程序中显示所有数据，例如 HTML 元素。我尝试过 JSON.parse，但它不起作用。

如果有人可以帮助我解决这个问题，我将不胜感激。

{
"images": [
{
"alternativeText": "cinnamon",
"path": "public/uploads/5585.jpg"
}
],
"_id": "606c39c884372a0e20c3f9bb",
"name": "Cinnamon",
"code": "5586",
"price": 49,
"category": {
"_id": "6064b37855bd0f26e0df4616",
"name": "Natural Essential Oils",
"createdAt": "2021-03-31T17:38:00.066Z",
"updatedAt": "2021-03-31T17:38:24.398Z",
"__v": 0
},
"description": "<p>Cinnamon Bark Vitality&trade; essential oil has a warm, spicy flavor that complements a variety of classic culinary treats and drinks. Cinnamon Bark Vitality is not only great for elevating dishes, but it can also be taken as a dietary supplement and is an important ingredient in some of Young Living&rsquo;s most popular products, including Thieves&reg; Vitality&trade; and Inner Defense&trade;. Cinnamon Bark Vitality&rsquo;s warm taste and nostalgic notes bring a spicy addition to your favorite dishes. By using Cinnamon Bark Vitality as a dietary supplement, you can help support healthy digestive and immune systems.</p>",
"createdAt": "2021-04-06T10:36:56.440Z",
"updatedAt": "2021-04-06T10:36:56.440Z",
"__v": 0
}

Run Code Online (Sandbox Code Playgroud)

检查图像附件。

接下来Js应用代码

const Product = ({product}) => {
    return (
        <Fragment>
            <Head>
                <title>Product</title>
            </Head>
            <Layout>
                <div className="container-fluid product-page">
                    <div className="page-body">
                        <div className="row product">
                            <div className="col-xl-5 col-lg-5 image-box">
                                <div className="preview-image">
                                    <div className="image">
                                        <img
                                            src={ImageRootPath + "/" + product.images[0].path}
                                            alt={product.images[0].alternativeText}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div className="col-xl-7 col-lg-7 info-box">
                                <div className="product-info">
                                    <div className="product-name">
                                        <h4>{product.name}</h4>
                                        <p>{"Product code: " + product.code}</p>
                                        <hr/>
                                    </div>
                                    <div className="product-price">
                                        <h5>Price: <span>{product.price + "$"}</span></h5>
                                        <p>{"Quantity: 5ml"}</p>
                                    </div>
                                    <div className="product-des">
                                        {product.description}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        </Fragment>
    );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

hgb*_*123 29

因为你想显示原始 HTML，所以这个

\n

<div className="product-des">\n  {product.description}\n</div>\n

Run Code Online (Sandbox Code Playgroud)\n

应该改为

\n

<div className="product-des" dangerouslySetInnerHTML={{ __html: product.description }}>\n

Run Code Online (Sandbox Code Playgroud)\n

这在官方文档中有介绍

\n

\n
dangerouslySetInnerHTML是 React\xe2\x80\x99s 替代浏览器中使用的innerHTMLDOM [...] 你必须输入dangerouslySetInnerHTML并传递带有键的对象__html
\n

\n

你还必须注意在这种情况下设置原始 HTML 的风险

\n

\n
一般来说，从代码设置 HTML 是有风险的，因为它\xe2\x80\x99很容易无意中使用户遭受跨站点脚本 (XSS) 攻击
\n

\n

归档时间：	4 年，8 月前
查看次数：	21408 次
最近记录：	4 年，8 月前