如何在 Prismic React Client 中从富文本编辑器渲染标签？

如何解决如何在 Prismic React Client 中从富文本编辑器渲染标签？

我正在处理一个 Prismic React 项目，在该项目中，我需要一个功能来显示来自富文本编辑器的工具提示，该功能预计会从富文本编辑器中的嵌套标签中显示。 一点点帮助对我们大有裨益。

这就是我想要的功能，但这并没有具体说明我们需要在整个项目中展示多少次以及在哪里展示这个东西：

解决方法

您可以使用自定义 HTMLSerializer 和工具提示库。这是我使用 react-tooltip(npm link)

序列化器将检测文本并将其包装在段落标签中；然后，它将使用标签作为 data-for 和 id 属性以及 <ReactTooltip /> 组件中的工具提示内容本身。

import React from 'react'
import { Elements } from 'prismic-reactjs'
import ReactTooltip from 'react-tooltip'

export const htmlSerializer = function (type,children,element,content) {
  switch (type) {
    case Elements.label:
      const label = children.data.label ? children.data.label : ''
      console.log(content.join(''))
      return (
        <span>
          <p data-tip data-for={label}>
            {content.join('')}
          </p>
          <ReactTooltip id={label} place="top" effect="solid">
            {label}
          </ReactTooltip>
        </span>
      )

      // ... here goes the rest of your HTML serializer confguration
    default:
      return null
  }
}

之后，我将其传递给我的富文本字段。

import { htmlSerializer } from '../utils/htmlSerializer'

<RichText render={document.data.text_field} htmlSerializer={htmlSerializer} />

然后，您只需要根据自己的喜好设置样式即可。这是组件外观的预览：