javascript - 如何在JSX中仅链接一个.map数组的一个元素

Question

我只想有一个 id = 0 的链接，而不是项目数组中其余元素的超链接。有人可以帮忙吗，谢谢:)

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>


............

...........
);

标签： javascriptreactjs

Answer 1

尝试以下解决方案

<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>