Question

我有此数据：

{ 
  "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标签内，并且出现相同的问题。有什么想法吗？

Answer 1

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

<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>

Answer 2

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

在页面中使用HTML标签渲染文本

2 个答案: