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

【问题标题】：Gatsby renderRichText with Contentful doesn't render hyperlink带有 Contentful 的 Gatsby renderRichText 不呈现超链接
【发布时间】：2021-08-04 12:23:46
【问题描述】：

我正在通过从内容中查询数据来呈现博客文章。除超链接外，一切正常。

我的选项对象：

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>
  )
}

我从内容中迭代数据，当类型为ContentfulRichText时，我调用renderRichText()

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

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

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

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

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

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

【问题讨论】：

标签： reactjs gatsby contentful

【解决方案1】：

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

时有效

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

【讨论】：