有条件地将 css 类应用于 React 三元中的 div答案

【问题标题】：Conditionally apply css class to div in React ternary有条件地将 css 类应用于 React 三元中的 div
【发布时间】：2018-10-04 14:27:12
【问题描述】：

我在 React 中映射一个数据对象，如果item.lead === true 或item.profile 或item.noprofile，我需要能够有条件地将一个类应用到一个div。我当前的实现是抓取用户数据，但不确定如何使用我当前的设置应用一个类：

反应配置文件

<li key={i} className={classes.member}>
      <a href={`mailto:${item.email}`}>
        {item.profile ? (
          <img
            alt={item.name}
            className={classes.profile}
            src={item.profile}
          />
        ) : (
          <div className={classes.noprofile}>
            <span className={classes.initials}>
              {item.firstName}
            </span>
          </div>
        )}
        <div className={classes.details}>
          <div>
            {item.firstName} {item.lastName}
          </div>
          <span>{item.title}</span>
        </div>
      </a>
    </li>

如果用户是潜在客户则需要应用的 JSS 类 (item.lead)

   lead: {
    "&:after": {
      content: `'LEAD'`,
      top: "5px",
      position: "relative",
      zIndex: "-1",
      fontSize: "10px",
      padding: "5px 4px 2px 4px",
    }
   }

【问题讨论】：

标签： reactjs ternary-operator

【解决方案1】：

你可以这样使用：

className={classes.profile + (item.lead && ' lead' || '')}

【讨论】：

所以，我知道你在这里尝试做什么，但是现在的逻辑是，如果 user.profile 有值，则显示用户图像，否则显示带有用户名的 div和标题。如果用户lead 字段是true，我需要将带有伪类的lead 类应用于任何配置文件。所以可能需要第三个选项，如果用户配置文件有lead: true，则将lead 类添加到className={classes.profile} 或className={classes.noprofile}

【解决方案2】：

@Bhojendra 的逻辑很接近，但我发现逻辑需要如下：

-对于带有图片的个人资料：(item.lead === true && ${classes.profilelead}) || ""

-对于那些没有：className={classes.noprofile + ((item.lead === true && ${classes.lead}) || "")}

【讨论】：