Question

我在表格列中显示了许多带有不同颜色的引导程序徽章。如果值存在，将显示此标志。徽章的类名称和样式名称不同，每个徽章使用不同的颜色。我认为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个徽章。预先感谢

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

Answer 2

如果有人感兴趣。解决方法如下：

  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>

显示带有条件值的重复html元素

2 个答案: