带有 Contentful 的 Gatsby renderRichText 不呈现超链接

Question

我正在通过从 contentful 查询数据来呈现博客 post。除超链接外一切正常。

我的选项对象：

const options = {
  renderMarks: {
    [MARKS.BOLD]: (text) => <span className="bold">{text}</span>,
  },
  renderNode: {
    [BLOCKS.HEADING_1]: (node) => {
      return (
        <H1>
          {node.content.map((element, index) => {
            return <span key={index}>{element.value}</span>
          })}
        </H1>
      )
    },
    [BLOCKS.HEADING_2]: (node) => {
      return (
        <H2>
          {node.content.map((element, index) => {
            return <span key={index}>{element.value}</span>
          })}
        </H2>
      )
    },
    [BLOCKS.PARAGRAPH]: (node) => {
      return node.content.map((element, index) => {
        return <Paragraph key={index}>{element.value}</Paragraph>
      })
    },
    [BLOCKS.QUOTE]: (node) => {
      return (
        <Quote>
          {node.content.map((quote) =>
            quote.content.map((element, index) => {
              return <span key={index}>{element.value}</span>
            })
          )}
        </Quote>
      )
    },
    [BLOCKS.EMBEDDED_ASSET]: (node) => {
      return (
        <GatsbyImage
          className="img-full"
          image={node.data.target.gatsbyImageData}
          alt="contentful-image"
        />
      )
    },
    [INLINES.HYPERLINK]: ({ data }, children) => {
      console.log(children, data)
      if (Array.isArray(children)) {
        console.log("is array", children[0])

        return <div>Test</div>
      }
      return <div>test</div>
    },
  },
}

const handleContentfulRichText = (module) => {
  console.log(module)
  return (
    <RichText key={module.id}>{renderRichText(module.body, options)}</RichText>
  )
}

我遍历来自 contentful 的数据，当类型为 ContentfulRichText 时，我调用 renderRichText()

const handleContentfulRichText = (module) => {
  console.log(module)
  return (
    <RichText key={module.id}>{renderRichText(module.body, options)}</RichText>
  )
}

上图显示了一个段落，后面是带有超链接的文本。未呈现超链接。

如 options 所示，我控制台将数据记录在 [INLINES.HYPERLINK] 中，如下所示

所以我确定数据是正确的。我只是不明白为什么没有渲染。我尝试为数组类型渲染 {children[0]}，为非数组类型渲染 {children}。

我还记录了此处显示的富文本的原始信息：

这是内容丰富的富文本组件：

Answer 1

问题出在我对段落的处理上。将 [BLOCKS.PARAGRAPH] 替换为

时有效

[BLOCKS.PARAGRAPH]: (node, children) => <Paragraph>{children}</Paragraph>,

带有 Contentful 的 Gatsby renderRichText 不呈现超链接

Gatsby renderRichText with Contentful doesn't render hyperlink

reactjs

contentful

gatsby