Конкатенация переменных и строк в React

При работе с React часто возникает необходимость объединить (конкатенировать) переменные со строками внутри атрибутов HTML-тегов. Например, мы можем хотеть добавить значение переменной к значению атрибута href, чтобы при клике на ссылку открывался определенный раздел на странице в зависимости от значения этой переменной.

Допустим, у нас есть следующая переменная, которую мы храним в состоянии компонента:

this.state.id

И мы хотим добавить эту переменную к значению атрибута href в HTML-теге:

<a href="#demo">Ссылка</a>

Цель — получить что-то вроде этого:

<a href="#demo1">Ссылка</a>

где 1 — это значение this.state.id.

Чтобы достичь этого, мы можем воспользоваться фигурными скобками {}, которые в React позволяют вставлять JavaScript-выражения прямо в JSX-код. Однако, просто вставить значение переменной внутрь строки не получится — нам нужно использовать оператор конкатенации +, чтобы объединить части строки и значение переменной в одну строку.

Правильный код будет выглядеть так:

<a href={«#demo» + this.state.id}>Ссылка</a>

В этом коде мы объединяем строку "#demo" с значением this.state.id, что дает нам итоговую строку "#demo1" (предполагая, что this.state.id равно 1). Заметьте, что весь атрибут href теперь обернут в фигурные скобки {} — это позволяет нам использовать JavaScript-выражение внутри него.

Таким образом, можно легко и удобно объединять переменные и строки в React и использовать результат в атрибутах HTML-тегов.