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

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

{this.state.id}

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

href="#demo1"
id="demo1"

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

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

который даст:

#demo1
63
ecmascript-6 html javascript reactjs

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/шаблон литералы С ` (backticks) и ${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