Блог

Главная - Вопросы по программированию - Реагируйте только на отображение компонентов свойств массива, которые существуют

Реагируйте только на отображение компонентов свойств массива, которые существуют

#reactjs #http #web

Вопрос:

Я хочу отображать только следующие компоненты, если существует их свойство href:

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

Вот массив, например, если свойства загрузки и посещения не существуют для объекта массива, то я не хочу, чтобы они появлялись.

     title: 'Ethereum Kickstarter Project',
    description: "Using React, Node.js, Solidity, I built an Ethereum decentralised crowd-funding alternative to GoFundMe. ",
    image: '/images/ethereumcampaign.png',
    tags: ['React', 'Node.js', 'Solidity'],
    href: "/campaigns",
    //download: 'https://google.com',
    source: 'https://github.com/rlm42/kickstart',
    //visit: "",
    id: 0,

Спасибо 🙂

Комментарии:

1.Вам нужно filter это сделать до того, как map tags.filter(t => t.visit).map(...)

Ответ №1:

Отфильтруйте свои данные перед выполнением сопоставления, hasOwnProperty() определите presence количество properties загрузок и посещений в вашем tag объекте:

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

Комментарии:

1. hasOwnProperty вернет значение true для свойств, которые существуют, но не определены. Я думаю, что лучшим вариантом было бы сравнить свойство с неопределенным. tag.download !== undefined

2. Я думаю, что @Dupocas хочет отображать теги, которые имеют как свойства загрузки, так и посещения, он может сказать нам, какой вариант использования он хочет.

3. Я думаю, довольно ясно, что он хочет отображать теги только там, где загрузка и посещение не определены. Какой смысл отображать ссылку для загрузки с неопределенной href?

Ответ №2:

я думаю, что есть 2 способа:

  1. фильтрация: 
         {tags.filter((tag) => tag.download amp;amp; 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 amp;amp; tag.download ? <Tag key={i}>{tag}</Tag> : ""}
   `))}
  </TagList>
Метки: ,