Как в react можно добавлять классы на элементы?

Question

[Kipsi]

В js можно добавлять классы используя например

const header = document.querySelector(`.header`);
  if (условие) {
      header.classList.add(`active`);
  }

А как в react'e можно делать подобное кроме как через

const box = props => {
  const deff = ['deff']
    if (props.name !== '') {
      deff.push('metal')
    } else {
      deff.push('energ')
    }
 
   return (
     <input
        className={deff.join(' ')}
      />
   )
}

Можно ли в нем тоже использовать classList.add или querySelector например?

Comments

[Yustas Alexu]

Обычно используют библиотеку classnames, как указал в своем ответе Александр Черемхин

Answer 1

[Александр Черемхин]

Обычно используют https://www.npmjs.com/package/classnames

В Вашем случае:

const classNames = require('classnames');

const box = props => {

  const inputClass = classNames('deff', {
        metal:  props.name,
        energ: !props.name
   });

   return  <input className={inputClass} />;
}

Answer 2

[Роман Александрович]

return (
     <input
        className={props.name !== ''?'deff  metal':' deff  energ'}
      />
   )

Comments

[Mesuti]

основы JS