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

【问题标题】：How can I render tags from Rich Text Editor in Prismic React Client?如何在 Prismic React Client 中从富文本编辑器渲染标签？
【发布时间】：2021-08-12 12:01:54
【问题描述】：

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

这是我想要的功能，但这并没有具体说明我们需要在整个项目中展示这个东西的次数和位置：

【问题讨论】：

标签： reactjs richtextbox rich-text-editor prismic.io

【解决方案1】：

您可以使用自定义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} />

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

【讨论】：