如何将 mailto 设置为子 react.js 组件的属性

Question

我在 React.js 中从 API 返回数据，一个属性是对象“用户”的“电子邮件”。我希望能够单击电子邮件地址，以便弹出一个发给该用户的新电子邮件窗口。我希望电子邮件地址出现在“收件人”输入字段中。

我想要这样的东西：<a href="mailto:user@example.com">user@example.com</a> 但要反应。

我一直在搜索，但我发现 this solution、this solution 和 this solution 难以理解，因为它们是用旧方式编写的，或者它们仅用于 react native。

有人建议事件this ...但是如何在我的组件中应用它？

window.open('mailto:email@example.com?subject=Subject&body=Body%20goes%20here')

这是子组件：

const UserDetail = ({name, username, email, address, address2, city, phone, website, company, onClick}) => {
 
  return (
    <>
      <DetailCard>    
        <Name>{name}</Name>
        <Data>Username:{username}</Data>
        <Data>E-mail:{email}</Data>
        <Data>Adress:{address}</Data>
        <Data>Adress 2:{address2}</Data>
        <Data>City:{city}</Data>
        <Data>Phone number:{phone}</Data>      
        <Data>Website:{website}</Data>      
        <Data>Company:{company}</Data>
        <Button onClick={onClick}>close</Button>      
      </DetailCard>
    </>
  )}

Answer 1

将onClick 事件处理程序附加到电子邮件字段：

const UserDetail = ({name, username, email, address, address2, city, phone, website, company, onClick}) => {
 
  function onEmailClick() {
      window.open(`mailto:${email}`);
  }

  return (
    <>
      <DetailCard>    
        ...
        <Data onClick={onEmailClick}>E-mail:{email}</Data>
        ...
      </DetailCard>
    </>
  )}