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

Question

一个来自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}不会替换为实际值,而是显示为字符串.我尝试了很多连接技巧,但似乎没有任何效果.我设法使其工作的唯一方法是将所有href值放在不同的变量中,如下所示:

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

这个解决方案有效,但为这样的事情创建一个新的变量看起来有点奇怪.有更简单的方法吗？

谢谢!

Answer 1

试试这个:

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

详细说明,除了传递字符串(传递数字,传递布尔值,使用javascript运算符连接字符串等)之外,任何时候都要使用花括号.