Javascript 如何使用字符串连接在JSX中创建DOM元素

React和JSX中的一个新人提出的问题。可能有一个简单的答案，但我在任何地方都找不到：-\

我有以下代码：

return (<div className='link-container' >
        <a href="tel: + {this.props.item.value}">{this.props.item.value}</a>
    </div>);

返回(
);

对我来说不起作用的是href值的串联。当前，生成的href值正是您所看到的值，{this.props.item.value}不会替换为实际值，而是显示为字符串。我尝试了许多串联技巧，但似乎没有任何效果。我设法使其工作的唯一方法是将all href值放入一个不同的变量中，如下所示：

var hrefValue = "tel:" + this.props.item.value;
return (<div className='link-container' >
            <a href={hrefValue}>{this.props.item.value}</a>
        </div>);

var hrefValue=“tel:”+this.props.item.value；
返回(
);

这个解决方案是可行的，但是为这样的事情创建一个新的变量看起来有点奇怪。有没有更简单的方法

谢谢

试试这个：

return (
    <div className='link-container' >
        <a href={"tel:" + this.props.item.value}>{this.props.item.value}</a>
    </div>);

返回(
);

更详细地说，除了传递字符串（传递数字、传递布尔值、使用javascript操作符连接字符串等）之外，任何时候都可以使用大括号