Отображение повторяющегося элемента html с условным значением

У меня есть много значков начальной загрузки с разным цветом, отображаемым в столбце таблицы. Этот значок будет отображаться, если это значение существует. Значок отличается от имени и имени стиля, используя разные цвета для каждого значка. Я думаю, что элемент html повторяется. В любом случае я могу повторно использовать элемент или сделать мой код проще?

        <td className="text-nowrap">
          {asset.kfc && (
            <span className="badge badge-primary">Kentucky Fried Chicken</span>
          )}{' '}
          {asset.mcd && (
            <span className="badge badge-success">Mc Donald</span>
          )}{' '}
          {asset.sub && (
            <span className="badge badge-danger">Subway</span>
          )}{' '}
          {asset.dom && (
            <span className="badge" style={{backgroundColor: 'pink'}} >Domino</span>
          )}{' '}
          {asset.krg && (
            <span className="badge" style={{backgroundColor: 'cyan'}} >Kenny Rogers Roasters</span>
          )}{' '}
        </td>

У меня 9 таких значков. заранее спасибо

javascript,reactjs,bootstrap-4,

0

Ответов: 2

1 принят

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

    var obj = {
        kfc: {title: 'Kentucky Fried Chicken', class: 'badge-primary'},
        mcd: {title: 'KMc Donald', class: 'badge-primary'},
        sub: {title: 'Subway', class: 'badge-primary'} 
    }

    Object.keys(asset).map(key=>(
        { assest[key] &&
            <span className={'badge '+obj[key].class} >{obj[key].title}</span>
        }
    ))
0

Если кому-то интересно. Вот решение:

  const obj = {
    kfc: {title: 'Kentucky Fried Chicken', class: 'badge-primary'},
    mcd: {title: 'Mc Donald', class: 'badge-success'},
    sub: {title: 'Subway', class: 'badge-danger'},
    pzh: {title: 'Pizza Hut', color: 'cyan'},
    dom: {title: 'Domino Pizza', color: 'pink'},
  };

  const badgeElem = asset =>
    Object.keys(obj).map(
      key =>
        asset[key] && (
          <Fragment>
            <span
              className={`badge ${obj[key].class}`}
              style={{backgroundColor: obj[key].color}}>
              {obj[key].title}
            </span>{' '}
          </Fragment>
        ),
    );

Код таблицы:

<td className="text-nowrap">{badgeElem(asset)}</td>

введите описание изображения здесь

JavaScript, reactjs, самозагрузки-4,
Похожие вопросы
Яндекс.Метрика