[英]How to href Link only one element of a .map array inside JSX
I just want to have a link for id = 0, and no hyperlinks for the rest of the elements in the projects array.我只想有一个 id = 0 的链接,并且没有项目数组中其余元素的超链接。 Can someone please help, thanks :)有人可以帮忙吗,谢谢:)
const Projects = () => (
<Section nopadding id="projects">
<SectionDivider />
<SectionTitle main>Projects</SectionTitle>
<GridContainer>
{projects.map(({ id, image, title, description, tags, source, visit }) => (
<BlogCard key={id}>
<Img src={image} />
<Link href="/campaigns">
<TitleContent>
<HeaderThree title>{title}</HeaderThree>
<Hr />
</TitleContent>
............
...........
);
Try the below solution尝试以下解决方案
<GridContainer>
{projects.map(({ id, image, title, description, tags, source, visit }) => {
const linkProps = id === 0 ? { href: "/campaigns" } : {}
return (
<BlogCard key={id}>
<Img src={image} />
<Link {...linkProps}>
<TitleContent>
<HeaderThree title>{title}</HeaderThree>
<Hr />
</TitleContent>
</Link>
</BlogCard>
)
})}
</GridContainer>
if you need that link even without herf use this code如果即使没有 herf 也需要该链接,请使用此代码
<GridContainer>
{projects.map(({ id, image, title, description, tags, source, visit }) => {
const linkProps = id === 0 ? { href: "/campaigns" } : {href: ""}
return (
<BlogCard key={id}>
<Img src={image} />
<Link {...linkProps}>
<TitleContent>
<HeaderThree title>{title}</HeaderThree>
<Hr />
</TitleContent>
</Link>
</BlogCard>
)
})}
</GridContainer>
if you don't need that link it doesn't have href use this code如果您不需要该链接,则它没有 href 使用此代码
<GridContainer>
{projects.map(({ id, image, title, description, tags, source, visit }) => {
const linkProps = id === 0 ? { href: "/campaigns" } : ''
return (
<BlogCard key={id}>
<Img src={image} />
{linkProps!=''&& <Link {...linkProps}>
<TitleContent>
<HeaderThree title>{title}</HeaderThree>
<Hr />
</TitleContent>
</Link>}
</BlogCard>
)
})}
</GridContainer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.