我应该如何遍历 .gifs 文件夹以使用 Gatsby.js 在列表中显示它们答案

【问题标题】：How should I traverse through a folder of .gifs to display them in a list using Gatsby.js我应该如何遍历 .gifs 文件夹以使用 Gatsby.js 在列表中显示它们
【发布时间】：2021-09-20 15:09:40
【问题描述】：

我正在尝试找出如何最好地显示一个 gif 列表，对于初学者来说，它位于我使用 Gatsby.js 的机器上的本地目录中。我做了一个很长的 Gatsby 教程，通过使用 gatbsy-remark 和 gatsby-image-remark 等，发现这些插件不喜欢 .gifs ......具体来说，任何需要 gatsby 插件'gatsby-plugin-sharp' 和'gatsby-transformer-sharp' 在尝试显示 gif 时不起作用。 GrahpQL 甚至警告您，将 childImageSharp 定位在 .gif 对象上将返回 null 并且确实如此...

所以我在导航组件中使用了这个 gatsby 代码...

import React from "react"
import Logo from "../images/glitch-logo.gif"
import Menu from "./menu"

import * as headerStyles from './header.module.scss'


class Navigation extends React.Component {

  render() {
    return (
      <>
        <img className={headerStyles.logo} src={Logo} alt="NFT Category Filter" onClick={() => this.toggleMenu()} onKeyDown={this.handleClick}></img>
        <Menu ref={el => (this.childMenu = el)} />
      </>
    )
  }

  toggleMenu() { 
    this.childMenu.open()
  }
}

export default Navigation

如果我想显示一个 .gif 数组，我不能在我的索引文件中做类似的事情吗？像这样？

import * as ImageList from '../images/categories' //folder with .gifs!!!
import Layout from '../components/layout'
import * as layoutStyles from '../components/layout.module.scss'




const IndexPage = () => {
  
  const ImageList = (props) => {
    const nfts = props.nfts;
    const listImages = nfts.map((nft) => {
      <li>{nft}</li>
      }
    )
  }

或者是否有值得下载的 gatsby 插件可以让使用 .gifs 更容易？

【问题讨论】：

标签： javascript reactjs gatsby gatsby-image gatsby-plugin

【解决方案1】：

您的方法，假设所有与符号相关的东西（路径、命名等）都是正确的。但是，您的 IndexPage 应如下所示：

const IndexPage = (props) => {
    const nfts = props.nfts;

   return <ul>
   {nfts.map((nft) => {
      return <li>{nft}</li>
   }}
   </ul>
  }

.map 循环需要 return 一个数组，你错过了语句。
props 继承自顶级组件，而不是继承自其内部函数。所以props，应该由IndexPage得到，并在组件的return语句中的JSX循环中使用。

【讨论】：