如何在“<p>”中添加来自 JSON 的文本？

Question

我正在使用 Contentful 获取描述文本并且描述有 "blocks" 文本，但是当我将它添加到我的代码时，输出看起来就像是一行文本。

我正在使用 React 并将描述作为道具传递，所以我只能编辑整个文本。无论如何我可以编辑它吗？还是我必须导入与 Contentful 分开的块？

传递文本的组件：

<Section
  bgImg={images.section1}
  title={data.section1Title}
  description={data.section1Description}
/>

接收文本的组件：

<div className="description">{description}</div>

Answer 1

我看到两个选项。第一个是你提到的，并通过 Contenful 将它们分开。

或者您可以在 React 端做一些事情并使用 Innerhtml 并传递带有 < p > 标签的描述。

{
 "desc": "<p>First block: Lorem ipsum</p><p>Second block: lorem ipsum</p>"
}

如果您选择 InnerHTML 路线，请注意可能存在的安全问题。这是我发现可能有帮助的 React 包：

How to add text from JSON inside "<p>"?