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

Question

我正在尝试弄清楚如何最好地显示 gif 列表，对于初学者来说，使用 Gatsby.js 位于我机器上的本地目录中。我做了一个很长的 Gatsby 教程，使用 gatbsy-remark 和 gatsby-image-remark 等，发现那些插件不喜欢 .gifs...具体来说，任何需要 gatsby 插件 'gatsby-plugin-sharp' 和 'gatsby-transformer-sharp' 在尝试显示 gif 时不起作用。 GrahpQL 甚至会警告您将 childImageSharp 定位到一个 .gif 对象上将会 return 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 更容易使用？

Answer 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循环中使用。

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

How should I traverse through a folder of .gifs to display them in a list using Gatsby.js

javascript

reactjs

gatsby

gatsby-image

gatsby-plugin