你几乎是正确的，只是放错了几个引号。将整个内容用正则引号括起来实际上会给你字符串#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。

连接props/变量的最佳方式：

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

你可以简单地做到这一点..

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>

如果你想在 JSX 中做到这一点

<button className={`tab__btn first ${props.state}`} >
    {props.text}
</button>

用于在 React 中使用 map 连接变量和字符串，例如：

{listOfCategories.map((Categories, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}