Javascript 显示具有条件值的重复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个这样的徽章。提前感谢

将每个跨度的标题和类名存储在变量中，这里是obj。 并假设assest是一个对象，映射键以返回span containing

    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>
        }
    ))

---

如果有人感兴趣。以下是解决方案：

  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>

---

你是说每一个跨度标签都是一枚徽章吗？@HemadriDasari是的