个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我已将产品描述作为 HTML 元素保存到这样的数据库中。但是当我将这些数据渲染到 div 中时，它显示为字符串。我想在我的 中显示所有数据，例如 HTML 元素下一个JS申请 .我尝试了 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™ 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’s most popular products, including Thieves® Vitality™ and Inner Defense™. Cinnamon Bark Vitality’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
}
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>
);
}
最佳答案
因为你想显示原始 HTML，所以这个
<div className="product-des">
{product.description}
</div>
<div className="product-des" dangerouslySetInnerHTML={{ __html: product.description }}>
dangerouslySetInnerHTMLis React’s replacement for usinginnerHTMLin the browser DOM [...] you have to type outdangerouslySetInnerHTMLand pass an object with a__htmlkey
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack
关于javascript - 如何在 Next JS Application 中将 String 转换为 HTML 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67034874/
24
4
0
如果您想使用 String.Concat() 连接 5 个或更多字符串，则它会使用 Concat(String[])。 为什么不一直使用 Concat(String[]) 而不再需要 Concat(S
今天在使用 String 时，我遇到了一种我以前不知道的行为。我无法理解内部发生的事情。 public String returnVal(){ return "5";
似乎在我所看到的任何地方，都有一些过时的版本，这些版本不再起作用。 我的问题似乎很简单。我有一个Java类，它映射到derby数据库。我正在使用注释，并且已经成功地在数据库中创建了所有其他表，但是在这
一、string::size_type() 在C++标准库类型 string ，在调用size函数求解string 对象时，返回值为size_type类型，一种类似于unsigned类型的int 数据
我正在尝试将数据保存到我的 plist 文件中，其中包含字符串数组的定义。我的plist - enter image description here 我将数据写入 plist 的代码是 -- let
我有一个带有键/值对的 JavaScript 对象，其中值是字符串数组: var errors = { "Message": ["Error #1", "Error #2"], "Em
例如，为了使用相同的函数迭代 List 和 List> ，我可以编写如下内容: import java.util.*; public class Test{ public static voi
第一个Dictionary就像 Dictionary ParentDict = new Dictionary(); ParentDict.Add("A_1", "1")
这是我的 jsp 文件: 我遇到了错误 The method replace(String, String, String) in the type Functions is not appl
我需要一些帮助。我有一个方法应该输出一个包含列表内容的 txt 文件(每行中的每个项目)。列表项是字符串数组。问题是，当我调用 string.Join 时，它返回文字字符串 "System.Strin
一位同事告诉我，使用以下方法: string url = "SomeURL"; string ext = "SomeExt"; string sub = "SomeSub"; string s
给定类: public class CategoryValuePair { String category; String value; } 还有一个方法: public
我正在尝试合并 Stream>>对象与所有 Streams 中的键一起映射到单个映射中. 例如， final Map someObject; final List>> list = someObjec
在这里使用 IDictionary 的值(value)是什么？ 最佳答案 使用接口(interface)的值(value)始终相同:切换到另一个后端实现时，您不必更改客户端代码。 请考虑稍后分析您的代
我可以知道这两个字典声明之间的区别吗？ var places = [String: String]() var places = [Dictionary()] 为什么当我尝试以这种方式附加声明时，只有
在 .NET 4.0 及更高版本中存在 string.IsNullOrWhiteSpace(string) 时，在检查字符串时使用 string.IsNullOrEmpty(string) 是否被视为
这个名字背后的原因是什么？ SS64在 PowerShell 中解释此处的字符串如下: A here string is a single-quoted or double-quoted string
我打算离开 this 文章，尝试编写一个接受字符串和 &str 的函数，但我遇到了问题。我有以下功能: pub fn new(t_num: S) -> BigNum where S: Into {
我有一个结构为 [String: [String: String]] 的多维数组。我可以使用 for 循环到达 [String: String] 位，但我不知道如何访问主键(这个位 [String:
我正在尝试使用 sarama(管理员模式)创建主题。没有 ConfigEntries 工作正常。但我需要定义一些配置。 我设置了主题配置(这里发生了错误): tConfigs := map[s
我是一名优秀的程序员,十分优秀！