动态href标签在JSX中反应

Question

// This Javascript <a> tag generates correctly
React.createElement('a', {href:"mailto:"+this.props.email}, this.props.email)

但是,我正在努力在JSX中重新创建它

<a href="mailto: {this.props.email}">{this.props.email}</a>

// => <a href="mailto: {this.props.email}"></a>

href标记认为它{this.props.email}是一个字符串而不是动态输入值{this.props.email}.关于我去哪里的任何想法都不对？

Answer 1

它返回一个字符串,因为您将其分配给字符串.

您需要将其设置为动态属性,该属性包含其开头的字符串

<a href={"mailto:" + this.props.email}>email</a>

Answer 2

执行Patrick建议的更多ES6方法是使用模板文字:

<a href={`mailto:${this.props.email}`}>email</a>