如何在JSX中输出字符串作为HTML？

Question

我将文本内容存储在JSON文件中并在JSX中输出。 （就我而言，我使用Gatsby并使用GraphQL查询JSON。）

例如，以下JSON ...

// example.json
[
  { "phrase": "Hello, world!" },
  { "phraseWithHTML": "<em>Hello</em>, <a href=\"https://example.com\">world!</a>" }
]

...在以下JSX中输出：

// ...
<p>{example.phrase}</p>
<p>{example.phraseWithHtml}</p>
// ...

在这两种情况下，字符串都以纯文本形式输出（即phraseWithHtml显示为字符串而不是目标： Hello world。

有没有办法将example.phraseWithHTML输出为HTML？我是否需要在JSON文件中以不同方式存储它？有没有办法在JSX中转换它？

Answer 1

您可以使用React的Dangerously Set innerHTML功能来执行此操作。

// ...
<p>{example.phrase}</p>
<p dangerouslySetInnerHTML={ return {__html: example.phraseWithHtml}; }></p>
// ...