Динамический тег href React in JSX

// 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}. Любые идеи о том, куда я пошел, неважно?

Ответ 1

Он возвращает строку, потому что вы назначаете ее строке.

Вы хотите установить его в динамическое свойство, которое включает в себя строку в начале этого

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

Ответ 2

Несколько более ES6-способ сделать то, что предлагает Патрик, - использовать литерал-шаблон:

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