Часть 2 из новой серии изучения React.js. В этом разделе мы рассмотрим Advanced JSX.

Добавление атрибутов className в JSX

Грамматика в React JSX в основном такая же, как и в HTML, но есть небольшие отличия, на которые следует обратить внимание.

В HTML мы обычно используем класс в качестве имени атрибута:

<div class="primary">Button</div>

В JSX вы используете className вместо слова class!

<div className="primary">Button</div>

Поскольку JSX ближе к JavaScript, чем HTML, React DOM использует соглашение об именах свойств camelCase вместо имен атрибутов HTML. При отображении JSX атрибуты JSX className автоматически отображаются как атрибуты class.

const myElement = (
  <h1 className="greeting">
    Hello, there!
  </h1>
);

Самозакрывающийся тег и фигурные скобки в JSX

Когда вы пишете самозакрывающийся тег в HTML, например (‹img›, ‹input›, ‹br›), необязательно включать косую черту непосредственно перед последней угловой скобкой:

Works with a slash in HTML:
<br />
Also works fine in HTML, without the slash:
<br>

Но! В JSX вы должны включить косую черту, иначе вы получите ошибку:

Fine in JSX:
<br />
WONT WORK AT ALL IN JSX:
<br>

Любой код между тегами элемента JSX будет читаться как JSX, а не как обычный Javascript! JSX не добавляет числа - он читает их как текст, как и HTML. Вам нужно написать код, заключив их в фигурные скобки. Таким образом, вы говорите: «Даже если мой код находится между тегами JSX, относитесь ко мне как к обычному Javascript, а не как к JSX».

//Curly braces in JSX
import React from 'react';
import ReactDOM from 'react-dom';
const math = (<h1>4 + 3={4 + 3}</h1>);
ReactDOM.render(math,
document.getElementById('app'));
//This outputs 4 + 3 = 7

Переменные и переменные атрибуты в JSX

Вы можете получить доступ к переменным внутри выражения JSX, даже если эти переменные были объявлены снаружи.

//Variables in JSX
import React from 'react';
import ReactDOM from 'react-dom';
const aString = "Hey, I am a string.";
ReactDOM.render(<h1>{aString}</h1>,
document.getElementById('app'));
//Hey, I am a string.

Вот пример того, как работают переменные атрибуты:

//Object properties are often used to set attributes:
const imgs = {
  butterfly: "https://media1.britannica.com/eb-media/06/1706-004-A94493A0.jpg",
  honeybee: "https://media1.britannica.com/eb-media/69/162669-120-995C9085.jpg",
  whale: "https://media1.britannica.com/eb-media/52/1452-004-BB2C55E0.jpg"
}
const butterflyImg = (
  <img
    src={imgs.butterfly}
    alt="Beautiful butterfly" />
);
const honeybeeImg = (
  <img
    src={imgs.honeybee}
    alt="Beautiful honeybee" />
);
//Use a variable to set the 'height' and 'width' attributes of an img:
const imgSize = "150px";
const whaleImg = (
  <img
     src={img.whale}
     alt="whale"
     height={imgSize}
     width={imgSize} />
);

Слушатели событий и условные операторы в JSX

Элементы JSX могут использовать прослушиватели событий, как и элементы HTML. Вы можете использовать прослушиватель событий, присвоив элементу JSX специальный атрибут. Вот пример:

<img onClick={myFunc} />

Значение атрибута прослушивателя событий должно быть функцией. Приведенный выше пример работает, только если myFunc была допустимой функцией, которая была определена в другом месте:

//Event listeners
function myFunc() {
  alert ("We made our function pop an alert");
}
<img onClick={myFunc} />

Теперь, когда вы узнали, как использовать фигурные скобки для вставки Javascript в выражение JSX, есть правило, которое вам необходимо знать: вы не можете вставлять оператор if в выражение JSX.

//This code wont work:
const testCondition = (
  <h1>
    {
      if (purchase.complete) {
         `Thanks for using us`
      }
  </h1>
)

Причина, по которой приведенный выше код не работает, заключается в способе компиляции JSX. Вы можете узнать об этом подробнее здесь, но это не должно нас огорчать. Если приведенный выше пример не работает. Если вы не можете внедрить оператор if в JSX, как вы можете написать условный оператор? Давайте рассмотрим пример ниже:

import React from 'react';
import ReactDOM from 'react-dom';
let message;
if (user.age >= drinkingAge) {
  message = (
    <h1>
      Hey, you can drink alcohol beverage!
    </h1>
  );
} else {
  message = (
    <h1>
      Hey, you can have water instead
    </h1>
  );
}
ReactDOM.render(message, document.getElementById('app'));

Приведенный выше пример работает, потому что if и else не включены между тегами JSX. Один из вариантов - написать оператор if, а не внедрять его в JSX.

Есть еще один способ писать условные выражения в JSX: тернарный оператор . Вот как можно использовать тернарный оператор в выражении JSX:

const textTernary = (
  <h1>
    { age >= drinkingAge ? 'Serve Beer' : 'Serve water or candy bar' }
  </h1>
);

В приведенном выше примере, если возраст больше или равен drinkAge, тогда textTernary будет ‹h1› Подать пиво ‹/h1›. В противном случае textTernary будет равно ‹h1› Подать воду или шоколадный батончик ‹/h1›.

Вы можете делать больше в JSX, например использовать && Conditionals, map и keys… точно так же, как мы используем их в обычном Javascript. Надеюсь, вы сможете использовать эту серию статей и создать отличное приложение на React.