Блог

У меня есть компонент, который имеет белый цвет, если он активен, и черный, если он неактивен. Как можно передать черный цвет в качестве реквизита?

Мой код прямо сейчас (он ничего не делает):

 export function Card (props) {  return lt;div {...props} className={styles.gray} /gt; }  

Я хочу использовать этот компонент (называемый Card ) в тернарном операторе, чтобы показать, активен компонент или нет.

Это styles имя вашей таблицы стилей css и gray селектора?

Существует множество различных способов создать такое поведение, но один из них прост, если у вас есть объект props в color качестве реквизита, вы можете сделать: lt;div style={{ color: props.color }}

Предполагая, что вы устанавливаете активное состояние вне карты, вот простой троичный шаблон.

Если активный определен вне карты:

 function Card({ isActive, ...props }) {  return (  lt;div  className={`${styles.gray} ${isActive ? styles.active : null}`}  {...props}  /gt;  ) }  

Используя помощника, например clsx , это выглядело бы так:

 lt;div className={  clsx(  styles.gray,  isActive ? styles.active : null,  ) } /gt;