Объединение переменных и строк в React

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

{this.state.id}

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

href="#demo1"
id="demo1"

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

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

что даст:

#demo1
2 63
javascript html reactjs ecmascript-6

2 ответа:

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

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

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

var text = "world";

и так:

{"Hello " + text + " Andrew"}

это даст:

Hello world Andrew

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

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

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

128

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

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