如何将 mailto 设置为 属性 of child react.js 组件

Question

我正在 React.js 中从 API 返回数据，一个 属性 是对象 'user' 的 'email'。我希望能够单击电子邮件地址，以便弹出一封发送给该用户的新电子邮件 window。我希望电子邮件地址显示在 'to' 输入字段中。

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

我一直在搜索，但我发现 this solution, this solution and 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>
    </>
  )}