我正在为此使用 React。基本上，我导入了三个社交媒体图像。Twitter、Facebook 和 Pinterest 只是 svg 的。
我正在从 CMS 后端接收数据，该数据只是所选社交媒体的一个字符串，它作为一个字符串返回。
因此，例如，当我渲染 {link.social_media} 时，我会收到“facebook”。
如果我从 {link.social_media} 得到 'facebook' 字符串，我想渲染 facebook 图像，如果我得到 'twitter' 返回 twitter 图像等等。
但是，我不知道为什么这不起作用，有人可以帮助我吗？
import React from "react";
import twitter from "../images/socials/twitter.svg";
import pinterest from "../images/socials/pinterest.svg";
import facebook from "../images/socials/facebook.svg";
const SocialDivider = ({ links, alignLeft }) => {
return Array.isArray(links) ? (
<div className="generic-block-container">
<div
className="socials-footer"
style={{
justifyContent: alignLeft ? "flex-start" : "",
}}
>
{Array.isArray(links) &&
links.map((link) => {
let selectedSocial = link.social_media;
console.log(selectedSocial);
// Say for example, this returns 'facebook'
return (
<a className="socials-footer__item" href={link.url}>
<img src={{ selectedSocial }} />
{/* This image should render the 'facebook' imported image */}
</a>
);
})}
</div>
</div>
) : (
<></>
);
};
export default SocialDivider;
您可以使用条件渲染作为selectedSocial输出字符串：
const getSocialImage = (selectedSocial) => {
let socialImage = twitter;
socialImage = selectedSocial === "twitter" ? twitter : socialImage;
socialImage = selectedSocial === "pinterest" ? pinterest : socialImage;
socialImage = selectedSocial === "facebook" ? facebook : socialImage;
return <img src={socialImage} alt="Social Icon" />;
}
然后在渲染函数中：
<a className="socials-footer__item" href={link.url}>
{getCardImage(selectedSocial)}
</a>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句