如何在 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>


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

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

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>

Answer 2

如果即使沒有 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>

如果您不需要該鏈接，則它沒有 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>