如何将 Gatsby Image 组件转换为图形

Question

我希望扩展 gatsby-image 组件，使其成为语义正确的 figure 并在其中添加一个 <figcaption>。

有一个 Tag 属性允许它呈现为 figure，但我不知道如何添加 child。

这是我试过的。

import Img from "gatsby-image"

const Figure = (props) => {
  return (
    <Img Tag="figure" fluid={props.fluid} alt={props.alt}>
        <figcaption>This is the caption of my amazing image.</figcaption>
    </Img>
  )
}

export default Figure

Answer 1

您在那里尝试做的是将 children 传递给外部的 <Img> 组件，因此您无法处理它。换句话说，<Img> 标签将包含在 <figcaption> 中，您不知道它是否接受 children 来呈现（它不接受）。

另一种可能对您有用的方法是将此配置包装在自定义图形标记中。如：

import Img from "gatsby-image"

const Figure = (props) => {
  return (
    <figure>
      <Img fluid={props.fluid} alt={props.alt}/>
      <figcaption>This is the caption of my amazing image.</figcaption>
    </figure>
  )
}

export default Figure

Tag 道具旨在更改包装器，默认设置为 <div>，但不允许您添加标题，尽管是 <figure>。

如何将 Gatsby Image 组件转换为图形

How to transform the Gatsby Image component into a figure

reactjs

gatsby

gatsby-image