JSX 中的动态 href 标签 React

Question

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

However, I'm struggling to recreate it in JSX

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

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

The href tag thinks the {this.props.email} is a string instead of dynamically inputting the value of {this.props.email} . Any ideas on where I went amiss?

Answer 1

It is returning a string because you are assigning it to a string.

You'll want to set it to a dynamic property, that includes a the string at the beginning of it

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

Answer 2

一个稍微多一点 ES6 的方式来做 Patrick 的建议是使用模板文字：

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

Answer 3

A nicer way to do this in my opinion will be to split it into a function and a JSX attr, something like that:

  <Button
    onClick=sendMail
  >
    Send mail
  </Button>

const sendMail = () => {
  const mailto: string =
    "mailto:mail@gmail.com?subject=Test subject&body=Body content";
  window.location.href = mailto;
}