React 仅显示存在的数组属性的组件

Question

我只想显示以下组件（如果它们的 href 属性存在）：

 <ExternalLinks href={source}>Code</ExternalLinks>
 <ExternalLinks href={download}>Download</ExternalLinks>
 <ExternalLinks href={visit}>Website</ExternalLinks>

这是数组，例如，如果数组对象不存在下载和访问属性，那么我不希望它们出现。

    title: '',
    description: "",
    image: '/images/ethereumcampaign.png',
    tags: ['React', 'Node.js', 'Solidity'],
    href: "/campaigns",
    //download: 'https://google.com',
    source: '',
    //visit: "",
    id: 0,

谢谢:)

Answer 1

有2种方法：

1. 过滤：

       {tags.filter((tag) => tag.download && tag.visit).map((tag, i) => (
           <Tag key={i}>{tag.title}</Tag>
           <Tag key={i}>{tag.description}</Tag>
           ...
         ))}
     </TagList>
   
   

2. 使用反引号（``）：

       {tags.map((tag, i) => (`
         ${tag.visit && tag.download ? <Tag key={i}>{tag}</Tag> : ""}
      `))}
     </TagList>
   

Answer 2

在进行映射之前过滤您的数据，

hasOwnProperty()

确定

presence

的

properties

下载并在您的

tag

对象中访问：

   <TagList>
        {tags
          .filter((tag) => tag.hasOwnProperty('download') && tag.hasOwnProperty('visit'))
          .map((tag, i) => (
            <Tag key={i}>{tag}</Tag>
          ))}
      </TagList>