在 Gatsby Site 的下拉菜单中显示/隐藏部分

Question

我正在做一个 Gatsby 项目。

我想保留一个员工文件夹，每个员工都有自己的文件夹，例如 src/staff/hanna-rosenfeld/...，其中包含一个 index.mdx 和一个图像文件。

我想获取员工的姓名和图像以在组件中使用。

我们的目标是构建这个：

我的 gatsby 配置：

    module.exports = {
      siteMetadata: {
          title: "Musikschule Weimar",
      },
        plugins: [
        "gatsby-plugin-image",
        "gatsby-plugin-sharp",
        {
            resolve: `gatsby-source-filesystem`,
            options: {
            name: `pages`,
            path: `${__dirname}/src/pages/`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
            name: `staff`,
            path: `${__dirname}/src/staff`,
            }
        },
        "gatsby-plugin-mdx",
        "gatsby-transformer-sharp",
        "gatsby-transformer-remark",
        `gatsby-remark-images`,
        ],
    };

我已经得到了执行下拉菜单的组件：

import * as React from 'react'
import { useState, useEffect } from "react"
import { useStaticQuery, graphql } from 'gatsby'
import { BiChevronDown } from "react-icons/bi";

import StaffList from "./StaffList"



const rows = [
    {
    id: 1,
    title: "Verantwortliche",
    },
    {
    id: 2,  
    title: "Lehrende der Zupfinstrumente",
    instrument: "zupfinstrumente"
    },
    {
    id: 3,  
    title: "Lehrende der Blechblasinstrumente",
    },
    {
    id: 4,  
    title: "Lehrende des Tasteninstruments",
    },
    {
    id: 5,  
    title: "Lehrende des Gesangs",
    },
    {
    id: 6,  
    title: "Lehrende des Schlagzeugs",
    },
    {
    id: 7,  
    title: "Lehrende des Akkordeons",
    },
    {
    id: 8,  
    title: "Lehrende der Musiktheorie",
    },
    {
    id: 9,  
    title: "Lehrende der Früherziehung",
    }
]


class DropDownRows extends React.Component {
    constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
    }
    render() {
    return (
        <div className="dropdown-rows">
        {rows.map(row => (
        <div key={row.id}>
            <div className="row">
            <div className="col">{row.title}</div>
            <div className="col">
                <BiChevronDown
                onClick={this.handleClick}
                style={{float: "right"}}/>
            </div>
            <div>
            </div>
            </div>
            {this.state.isToggleOn ? <StaffList /> : ''}
        </div>
        ))}
    </div>
    )
    }
}

export default DropDownRows

src/staff/hanna-rosenfeld/index.mdx

---
title: Hanna Rosenfeld
featuredImage: ./Foto_05.jpg
---

Hi, mein Name ist Hanna und ich bin ein full time web developerin.

我的 StaffList 组件：

import * as React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

    
function StaffList({ data }) {
    return(
    <StaticQuery
    query={graphql`
        query staffQuery {
        allMdx {
            edges {
            node {
                id
                body
                frontmatter {
                title
                featuredImage {
                    childImageSharp {
                    fluid {
                        ...GatsbyImageSharpFluid
                    }
                    }
                }
                }
            }
            }
        }
        }       
        `}

        render={data => (
        <div>
        <h1>{data.allMdx.edges.map(edge => <h1 key={edge.node.id} data={edge.node}>{edge.node.frontmatter.title}</h1>)}</h1>
        <GatsbyImage alt='some alt text' image={getImage(data.allMdx.edges.map(edge => edge.node.frontmatter.featuredImage))} />
        </div>
    )}
    />
    )
}



export default StaffList

查询 featuredImage 在 graphiql 中有效，但我无法显示图像。 控制台输出：

"警告：失败的道具类型：道具图像在 GatsbyImage，但它的值是未定义的。”

网站上组件的当前状态是这样的：

让名称仅显示在其类别中是另一个问题，现在我只想显示图像。

感谢您提前对可能的解决方案提供任何见解。

Answer 1

这里有几点要评论：

渲染结构很奇怪。您应该循环遍历您的数据，就像显示 h1 一样，但同时，您可以利用循环来显示每个员工的图像。

此外，您使用的是 Gatsby Image v2 GraphQL 查询结构 (gatsby-image)，而渲染组件 (GatsbyImage) 来自 v3 (gatsby-plugin-image)。我建议阅读migration guide。

总而言之，当您像使用 ...GatsbyImageSharpFluid 片段一样查询 fluid 或 fixed 图像时，您正在查询 v2 结构，渲染组件应该是 Img（来自 @987654322 @)，即接受 fixed 或 fluid 图像。但是，当您使用GatsbyImage 组件时，传递的道具应该是image（无论它是固定的还是流动的）。所以，你有冲突的插件和结构。您应该摆脱其中一个并使用相应的结构。回顾一下：

• fixed 或fluid GraphQL 查询：v2 结构，渲染组件为Img
• GatsbyImage 组件：v3 结构。假设您将迁移到 v3（不推荐使用 v2），我的回答将基于此。

问题出现了，因为正如我所说，GatsbyImage 期待 image 道具，而您正在传递循环和错误的查询数据：

<GatsbyImage alt='some alt text' image={getImage(data.allMdx.edges.map(edge => edge.node.frontmatter.featuredImage))} />

使用更简单的：

   <div>
        {data.allMdx.edges.map(edge => (
         <article>
          <h1 key={edge.node.id}>{edge.node.frontmatter.title}</h1>
          <GatsbyImage alt='some alt text' image={getImage(edge.node.frontmatter.featuredImage)} />
         </article> 
        ))}
        </div>

当您结束迁移时，完整的 sn-p 应如下所示：

import * as React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

    
function StaffList({ data }) {
    return(
    <StaticQuery
    query={graphql`
        query staffQuery {
        allMdx {
            edges {
            node {
                id
                body
                frontmatter {
                title
                featuredImage {
                 childImageSharp {
                   gatsbyImageData(
                     width: 200
                     placeholder: BLURRED
                     formats: [AUTO, WEBP, AVIF]
                   )
                 }
                }
                }
            }
            }
        }
        }       
        `}

        render={data => (
         <div>
        {data.allMdx.edges.map(edge => (
         <article>
          <h1 key={edge.node.id}>{edge.node.frontmatter.title}</h1>
          <GatsbyImage alt='some alt text' image={getImage(edge.node.frontmatter.featuredImage)} />
         </article> 
        ))}
        </div>
    )}
    />
    )
}



export default StaffList

检查开/关括号并在更改数据源时通过运行gatsby clean清理缓存。