gatsby-plugin-image 使用给定的 prop

问题描述

考虑我有以下组件

// variant can be one of [facebook,google,apple,...etc]
<Companylogo variant="facebook"/>

variant 的可能值数量是有限的。

我想根据 variant 属性的值动态加载相应的图像。

现在，我想到了两种方法。

选项 1：使用 GraphQL 查询所有公司徽标图像，并使用 JS 找到我需要的图像。

const { images: { edges: images } } = useStaticQuery(graphql`
    query {
      images: allFile(filter: {
        sourceInstanceName: {eq: "images"},relativeDirectory: {eq: "companies"}
      }) {
        edges {
          node {
            name
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  `);

const image = images.find(({ node: { name } }) => variant === name );

我担心的是，我不确定这是否会极大地影响性能，尤其是在有很多公司徽标的情况下。

选项 2：使用 switch 或 if 条件加载图像

switch (variant) {
  case 'facebook':
    return <StaticImage src="facebook.png" />
  case 'apple':
    return <StaticImage src="apple.png" />
  // ...etc
}

问题是代码真的很臭。

您有更好的方法来实现这一目标吗？

解决方法

在这两种方法中，选项 1 是最适合您的方法。

请记住，在 switch/case 方法中，您将评估所有 case，直到您的选项匹配为止，就像您有一堆 if 一样。选项 2 是性能最低的方法。

我会添加第三个试验，在我看来这是性能最好的一个字典（地图）：

const LOGO_VARIANTS = {
 facebook: <StaticImage src="facebook.png" />,apple: <StaticImage src="apple.png" />,potatoes: <StaticImage src="potatoes.png" />,'dashed-logo':  <StaticImage src="dashed-logo.png" />
}

然后，您只需要使用键值访问位置，例如：

const SomeComponent = () =>{

   return <div>My logo is {LOGO_VARIANTS['facebook']}</div>
}

注意：调整该逻辑以使其适应您的需求，例如将 LOGO_VARIANTS['facebook'] 分配给一个新变量并将其呈现为：const Image= LOGO_VARIANTS['facebook'] 然后 <Image/>

我不确定整个逻辑，这种方法可能不是您的最佳/最佳解决方案。如果你不想过度逻辑，我会使用选项 1，它比选项 2 好得多。