Динамический тег href реагирует в 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}. Есть идеи, где я ошибся?

8
javascript react-jsx reactjs

2 ответов

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

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

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

23

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

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

9