使用 nextjs 应用程序在内容丰富的富文本中渲染带有 className 属性的 span 元素

Question

我想渲染内容丰富的richText，其中包含带有className属性的span（例如：react应用程序中的

className = 'blue')

），这样我就可以将该类应用于标题文本的特定片段。 我怎样才能做到这一点？

Answer 1

根据我的经验，您可以创建一个名为

CodeBlock

的内容模型并将其添加到

RichText

内容中。 该

CodeBlock

应该包含您想要的内容。即：

<span className='blue'>xxx</span>

。

然后，您可以使用此包渲染RichText：https://www.npmjs.com/package/@contentful/rich-text-react-renderer

在这个包中，您可以找到名为

documentToReactComponents

的方法。 它具有自定义节点渲染的选项，因此您可以在此处执行

CodeBlock

。您可以使用

dangerouslySetInnerHTML

来渲染

CodeBlock

的内容。