В JSX используется className вместо HTML атрибута class потому что class — это зарезервированное слово в JavaScript. Поскольку JSX — это расширение JavaScript, использование class как имя атрибута создало бы конфликт синтаксиса и вызвало ошибки.
Когда ты рендеришь элементы в React, ты передаёшь имена CSS классов строкой в проп className:
render() {
return <span className={'menu navigation-menu'}>Menu</span>
}
className принимает строковые значения с одним или несколькими CSS классамиclass; это касается только React/JSX кодаТы также можешь использовать template literals для динамического присваивания классов:
<div className={`header ${isActive ? 'active' : ''}`}>Content</div>
Такой подход часто используют когда классы нужно применять условно в зависимости от состояния компонента или props.
Ключевое слово class нельзя использовать в JSX, потому что это зарезервированное слово в JavaScript, которое вызовет синтаксическую ошибку.
Новый — ещё не проверен сообществом
Вы