如何在 React 中隐藏带有内联条件样式的 link？

Question

我现在正在构建我的作品集，我想在 href 为空时隐藏我的项目的下载 link

<GridContainer>
  {projects.map(({id, image, title, description, tags, source, visit, pdf}) => 
    <BlogCard key={id}>
      <div>
        <Img src={image} style={{alignContent:"flex-start", display:"flex"}}/>
        <br/>
        <TitleContent>
          <HeaderThree title>{title}</HeaderThree>
          <Hr />
        </TitleContent>
        <CardInfo>{description}</CardInfo>
      </div>
      <div >
        <br/>
        <TitleContent>Technologies utilisées :</TitleContent>
        <TagList>
          {tags.map((tag, i) => (
            <Tag key ={i}>{tag}</Tag>
          ))}
        </TagList>
        <UtilityList>
          <ExternalLinks href={source}>Code</ExternalLinks>
          <ExternalLinks href={pdf} download >PDF</ExternalLinks>
          <ExternalLinks href={visit}>Live</ExternalLinks>
        </UtilityList>
      </div>
    </BlogCard>
  )}
</GridContainer>

href 导入自：

export const projects = [
  {
    title: 'test',
    description: "test",
      image: 'test',
      tags: ['PHP', 'MYSQL', 'HTML', 'CSS'],
    source: 'https://google.com',
    visit: 'https://google.com',
    pdf:'#',
    id: 0,
  },

我像这样从样式组件导入 css：

export const ExternalLinks = styled.a`

color:#d4c0c0;
font-size: 1.6rem;
padding:1rem 1.5rem;
background: #6b3030;
border-radius: 15px;
transition: 0.5s;
&:hover{
  background: #801414;
}
`;

想法是仅在 pdf:'#' 时隐藏 PDF ExternalLinks 但我仍然不知道该怎么做那。你能帮帮我吗？

如果您需要有关我的代码的一些详细信息，请告诉我，感谢您的帮助！

Answer 1

您可以使用三元运算符有条件地呈现特定元素，在这种情况下，您的 ExternalLinks 组件将不会呈现，直到满足条件。

{pdf.length > 1 ? <ExternalLinks href={pdf} download >PDF</ExternalLinks> : null}

您可以根据您的数据集更改此条件(pdf.length > 1)。

Answer 2

您可以在检查 href 的值是否不等于“#”的条件下包装受影响的组件。

{pdf !== "#" ? <ExternalLinks href={pdf}>PDF</ExternalLinks> : null }

如何在 React 中隐藏带有内联条件样式的 link？

How can I hide a link with inline conditional styling in react?

css

inline

conditional-statements

reactjs