在页面中呈现带有 HTML 标记的文本 [重复]

Posted 2023-02-21

【中文标题】在页面中呈现带有 HTML 标记的文本 [重复]

【英文标题】：Render text with HTML tags in page [duplicate]

【发布时间】：2020-03-12 21:42:59

【问题描述】：

我有这些数据：

 
  "text":"<h1>hello</h1><p style=backgroundColor:blue>Paragraph text</p>",
  "type":"bold"
,

但是当我在我的页面中显示它时，它会显示标签 h1 和 p 以及样式。我怎样才能打印这个变量，并让标签也能正常工作？

这是我的 js：

<div key=index>
    descriere.type === "bold" ? (
    <p style= color: "red" >
        data.text
    </p>
    ) : (
    <p style= color: "purple" >
        data.text
    </p>
    )
</div>

我也尝试在 div 标签内打印它，同样的问题。 有什么想法吗？

【参考方案1】：

您可以使用dangerouslySetInnerhtml 属性来呈现HTML。这是working example

【参考方案2】：

尝试使用dangerouslySetInnerHTML，它广泛用于 gatsby，您可以在其中查询降价内容。

<div key=index>
  descriere.type === 'bold' ? (
    <p style= color: 'red' >
      <div dangerouslySetInnerHTML=__html: data.text />
    </p>
  ) : (
    <p style= color: 'purple' >
      <div dangerouslySetInnerHTML=__html: data.text />
    </p>
  )
</div>