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

问题描述

我正在尝试找出如何最好地显示 gif 列表，对于初学者来说，使用 Gatsby.js 位于我机器上的本地目录中。我做了一个很长的 Gatsby 教程，通过使用 gatbsy-remark 和 gatsby-image-remark 等，发现这些插件不喜欢 .gifs...具体来说，任何需要 gatsby 插件“gatsby-plugin-sharp”和尝试显示 gif 时，“gatsby-transformer-sharp”不起作用。 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 更容易？

解决方法

您的方法，假设所有与符号相关的内容（路径、命名等）都是正确的。但是，您的 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循环中使用。