동적 href 태그 JSX에서 반응

동적 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}내가 어디로 잘못 갔는지 생각나는 거 있어?

문자열을 문자열에 할당하기 때문에 문자열을 반환하는 것이다.

시작 부분에 문자열을 포함하는 동적 속성으로 설정하려는 경우

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

패트릭이 제안하는 것을 하기 위한 약간 더 많은 ES6 방법은 템플릿 문자 그대로를 사용하는 것이다.

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

내 생각에 이것을 하는 더 좋은 방법은 그것을 함수와 JSX 아트로 나누는 것이다.

  <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;
}

참조URL: https://stackoverflow.com/questions/34779642/dynamic-href-tag-react-in-jsx