如何使用字符串连接在 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 运算符连接字符串等）之外，任何时候你都可以使用大括号。

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

How to create a DOM element in JSX using string concatenation

javascript

react-jsx