Условно применить класс CSS к div в React ternary

Question

Я сопоставляю объект данных в React, и мне нужно иметь возможность условно применить класс к div, если item.lead === true для item.profile или item.noprofile.Моя текущая реализация захватывает пользовательские данные, но я не уверен, как применить класс с моей текущей настройкой:

Профиль реагирования

<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",
    }
   }

Answer 1

@ Логика Бхойендры была близка, но я обнаружил, что логика должна быть следующей:

- для профилей с изображениями: (item.lead === true && $ {classes.profilelead} ) || ""

-для тех, у кого нет: className={classes.noprofile + ((item.lead === true && $ {classes.lead} ) || "")}

Answer 2

Вы можете использовать так:

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