gatsby-plugin-image用给定的道具加载图像

Question

考虑我有以下组件

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

CCD_ 1的可能值的数目是有限的。

我想根据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
}

问题是代码真的很臭

你有更好的方法来实现这一点吗？

Answer 1

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

请记住，在切换/案例方法中，您将评估所有案例，直到您的选项匹配，就像您有一堆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好得多。