Как менять классы элемента в зависимости от условия в React?

Question

В react меня есть обьект классов, который я использую следующим образом

<div className={cl.aside__change}>
     <button className={cl.aside__change_button}>Начать смену</button>
     <button className={cl.aside__change_button}>Завершить смену</button>
</div>

Можно ли менять классы элемента в зависимости от какого-нибудь условия?

Answer 1

Нужно просто вместо названия класса подставить переменную-состояние строчного типа, а потом менять эту переменную, как угодно. Вот компонент, который подставляет в элемент класс с названием header при клике по нему:

import "./style.css";
import { useState } from "react";

export default function Comp1(props){
   let [myClassName, setMyClassName] = useState("");
   
   function SetNewClass(){
   setMyClassName("header");
   }

   return <div className={myClassName} onClick={SetNewClass}>Click on the string 
   to change the class</div>;
}

Вот пример с импортом классов из модуля в объект style:

import style from "./comp1.module.css";
import { useState } from "react";
export default function Comp1(props){
   let [myClassName, setMyClassName] = useState("myclass");

   function setNewClass(){
      setMyClassName("myclass2");
   } 

   return <div className={style[myClassName]} onClick={setNewClass}> 
   Click on the string to change the class
   </div>;
}

Объект style содержит свойства с названиями, как у классов в модуле. Можно создать переменную-состояние строчного типа и обращаться к разным свойствам объекта style через скобочную нотацию объекта, как здесь – style[myClassName], то есть когда мы вставляем в скобки строку с названием свойства. При изменении строки изменится и свойство, к которому мы обращаемся.

Answer 2

Имя класса - это строка, поэтому для смены класса можно воспользоваться всем, что на выходе вернет нам строку

Сгенерируем имя класса(ов) в строку и потом передадим в рендер.

Переменная может быть как пропсом, стейтом, так и просто переменной, собранной при рендере компонента

const myClass = 'myClass' + ' black';
<div className={myClass}></div>

Условные операторы

Тернарный оператор

<div className={isChecked ? 'green' : 'blue'}></div>

<div className={`mainClass ${isChecked ? 'green' : 'blue'}`}></div>

Логическое ИЛИ ||(если слева false, то возьми значение справа

<div className={classVariable || 'otherClass'}></div>

Оператор нулевого слияния ??(Если слева null или undefined, то подставится значение справа

<div className={classVariable ?? 'otherClass'}></div>

Функция для генерации (не самое правильное решение)

const color = () => {
  // тут мега логики выбора классов и сбора их встроку
  return 'class1 megaClass boxChecked'
}
<div className={color()}></div>

Справочник(объект), где inValue это какойто параметр props или state или что то рассчитанное

const colorSelect = {
  one: 'class1',
  two: 'greenClass'
}
<div className={colorSelect[inValue]}></div>

БЛОГ НА HUSL