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

【问题标题】：How to href Link only one element of a .map array inside JSX如何在JSX中仅链接一个.map数组的一个元素
【发布时间】：2021-09-27 15:58:36
【问题描述】：

我只想有一个 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>


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

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

【问题讨论】：

标签： javascript reactjs

【解决方案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>

【讨论】：

感谢您的回复，我收到“需要标识符，const 是不能在此处使用的保留字”。
在我的例子中你应该没有任何错误，你能显示你当前的代码吗？
和你的一样，只是得到了那个错误，它不允许我在那里声明一个 linkProps 变量
我想你认为你的代码和我的一样，也许你错过了什么。
为了证明没有错误，您可以查看此处ibb.co/WDNnFNZ。能否也分享一下你的 IDE，让我们多一双眼睛来解决你的问题

【解决方案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>

【讨论】：

有时您希望有一个链接来显示标题并保持相同的样式。从语义和用户体验的角度来看，你是对的，因为如果某物不是链接，它不应该看起来像一个链接。