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

В предыдущей статье "Язык JSX в React" были разобраны простейшие примеры кодов компонентов. Попробуем углубиться в эту тему и опробовать вставку переменных в HTML код с использованием JSX в React.

Вставка переменной в JSX

Возьмём простейший пример:

function App() {
   return <div>
      Тише, мыши, кот на крыше!
   </div>;
}

Попробуем вынести часть предложения "Тише, мыши, кот на крыше!" в переменную. Тогда для её вставки в HTML потребуется обрамить название переменной в фигурные скобки, чтобы получилось так:

function App() {
   const mice = 'мыши';
   return <div>
      Тише, {mice}, кот на крыше!
   </div>;
}

Внутри фигурных скобок можно выполнять любые операции: арифметические, строковые и логические (и не ограничиваясь ими). Фактически, содержание этих скобок обрабатывается как JavaScript код. То есть можно даже записать {Math.sqrt(4)} и на месте скобок будет выведено число "2" (результат взятия квадратного корня из "4").

Так как содержание скобок обрабатывается как JavaScript, то можно использовать и массивы, и объекты:

function App() {
   const arr = [1, 2, 3];
   const obj = [a: 1, b:2, c:3];
   return <div>
      <p>{arr[0]}</p>
      <p>{arr[2]}</p>
      <p>{arr[1]}</p>
      <p>{obj.a}</p>
      <p>{obj.b}</p>
      <p>{obj.c}</p>
   </div>;
}

Теги в переменных в JSX

Помимо отдельных значений в переменных можно хранить и HTML теги, используя JSX синтаксис. К примеру:

function App() {
   const mice = <b>мыши</b>;
   return <div>
      Тише, {mice}, кот на крыше!
   </div>;
}

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

const mice = <b>Тише, </b><b>мыши</b>;

Чтоб избежать ошибки надо обрамить несколько тегов одним:

const mice = <div><b>Тише, </b><b>мыши</b></div>;

А чтобы не нарушать вёрстку приложения, можно использовать "пустые" теги <> ... </>, которые в процессе рендеринга React удалит самостоятельно:

const mice = <><b>Тише, </b><b>мыши</b></>;

Вставка атрибутов в JSX

При вставке значений атрибутов тегов не надо заключать из в двойные кавычки. Приведём пример с вставкой значения атрибута id из константы:

function App() {
   const main = 'id_value';
   return <div id={main}>
      Тише, мыши, кот на крыше!
   </div>;
}