React JSX Атрибуты

JSX позволяет вставлять атрибуты в HTML-элементы, но существуют несколько важных отличий.

class = className

Атрибут class широко используется в HTML, но поскольку JSX компилируется в JavaScript, а class является зарезервированным ключевым словом в JavaScript, его нельзя использовать в JSX.

JSX решил эту проблему, заменив class на className. При рендеринге JSX атрибут className автоматически преобразуется в class.

Пример

Используйте атрибут className вместо class в JSX:


function Car() {
  return (
    <h1 className="myclass">Hello World</h1>
  );
}

Выражения как атрибуты

Значения атрибутов в JSX могут быть представлены в виде JavaScript-выражений. Это особенно полезно для динамического задания атрибутов.

Пример

Используйте JavaScript-выражения в качестве значений атрибутов:


function Car() {
  const x = "myclass";
  return (
    <h1 className={x}>Hello World</h1>
  );
}

Значение атрибута не должно быть заключено в кавычки, что важно при использовании выражений (JavaScript-переменных). Если вы заключите значение в кавычки, JSX воспримет его как строку, а не как JavaScript-выражение.

Атрибуты событий в camelCase

Атрибуты событий в JSX записываются в стиле camelCase.

Пример

Используйте camelCase для атрибутов событий:


function Car() {
  const myfunc = () => {
    alert('Hello World');
  };
  return (
    <button onClick={myfunc}>Click me</button>
  );
}

Булевы атрибуты

Если атрибут передан без значения, JSX трактует его как true. Чтобы передать false, необходимо явно указать это в виде выражения.

Пример

Булево значение true в JSX, кнопка будет неактивна:


<button onClick={myfunc} disabled>Click me</button>

Пример

То же самое значение true, кнопка будет неактивна:


<button onClick={myfunc} disabled={true}>Click me</button>

Пример

Значение false в JSX, кнопка будет активной:


<button onClick={myfunc} disabled={false}>Click me</button>

Атрибут style

Атрибут style в JSX принимает объект JavaScript с CSS-свойствами, записанными в camelCase, а не строку CSS (как в обычном HTML).

Пример

Использование атрибута style:


function Car() {
  const mystyles = {
    color: "red",
    fontSize: "20px",
    backgroundColor: "lightyellow",
  };

  return (
    <>
      <h1 style={mystyles}>My car</h1>
    </>
  );
}

Обратите внимание на два аспекта в примере выше:

Стили хранятся в объекте.
Свойства стилей записаны в camelCase, например, fontSize вместо font-size.

Это важное отличие между обычным HTML и JSX.