Есть ли способ включить в React обозначение фигурных скобок и тег href? Скажем, у нас есть следующее значение в состоянии:

{this.state.id}

и следующие атрибуты HTML в теге:

href="#demo1"
id="demo1"

Есть ли способ добавить состояние id в атрибут HTML, чтобы получить что-то вроде этого:

href={"#demo + {this.state.id}"}

Что даст:

#demo1

Ответы (5)

Вы почти правы, просто неуместны несколько цитат. Заключение всего этого в обычные кавычки буквально даст вам строку # demo + {this.state.id} - вам нужно указать, какие из них являются переменными, а какие - строковыми литералами. Поскольку все, что находится внутри {}, является встроенным JSX выражением, вы можете сделать:

href={"#demo" + this.state.id}

Это будет использовать строковый литерал # demo и объединить его со значением this.state.id. Затем это можно применить ко всем струнам. Считайте это:

var text = "world";

А это:

{"Hello " + text + " Andrew"}

Это даст:

Привет мир, Андрей

Вы также можете использовать строковую интерполяцию ES6 /литералы шаблона с `(обратные кавычки) и $ {expr} (интерполированное выражение), что ближе к тому, что вы, кажется, пытаетесь делать:

href={`#demo${this.state.id}`}

Это в основном заменит значение this.state.id, объединяя его с # demo. Это эквивалентно выполнению: "# demo" + this.state.id.

Если вы хотите сделать это в JSX


вы можете просто сделать это ..

 

лучший способ объединения реквизитов / переменных:

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test

для объединения переменных и строк в React с картой, например:

{listOfCategories.map((Categories, key) => { return (  
); })}

2022 WebDevInsider