При работе с 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-тегов.
Добавить комментарий