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

Question

我正在寻找扩展gatsby-image组件以使其在语义上正确figure并在其中添加一个<figcaption>。

有一个Tag道具可以将其渲染为figure，但我不知道如何添加孩子。

这是我尝试过的。

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>标签将在 a 内部<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道具旨在更改包装器，默认设置为 a<div>但不允许您添加标题，尽管是<figure>.