如何在React.js子组件中配置mailto属性实现点击邮箱唤起邮件窗口

React Web端实现这个需求非常简单，不需要复杂的第三方依赖，下面给两种可直接复用的写法：

方案1：直接使用原生mailto链接（最推荐） #

React完全支持原生HTML的a标签用法，只需要把邮箱部分用a标签包裹，动态插值传入email变量即可，直接修改你组件里的邮箱行代码：

const UserDetail = ({name, username, email, address, address2, city, phone, website, company, onClick}) => {
 
  return (
    <>
      <DetailCard>    
        <Name>{name}</Name>
        <Data>Username:{username}</Data>
        {/* 仅修改这一行即可 */}
        <Data>E-mail:<a href={`mailto:${email}`}>{email}</a></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>
    </>
)}

如果需要自动填充邮件主题、正文，可以直接拼接参数：

<a href={`mailto:${email}?subject=联系${name}&body=您好：`}>{email}</a>

如果需要调整链接样式和你的网站UI统一，直接给a标签加className或者行内样式即可。

方案2：点击事件触发（适用于需要埋点、前置校验的场景） #

如果你需要在点击邮箱后先执行自定义逻辑（比如上报点击事件、校验邮箱有效性），可以用点击事件配合window.location.href实现：

const UserDetail = ({name, username, email, address, address2, city, phone, website, company, onClick}) => {
  const handleEmailClick = () => {
    // 可在这里加自定义逻辑，比如埋点、校验
    if (!email) return
    window.location.href = `mailto:${email}`
    // 也可以用window.open(`mailto:${email}`, '_blank') 但会多打开一个空白页，不推荐
  }

  return (
    <>
      <DetailCard>    
        <Name>{name}</Name>
        <Data>Username:{username}</Data>
        {/* 点击邮箱文本触发 */}
        <Data>E-mail:<span style={{cursor: 'pointer', color: '#1890ff'}} onClick={handleEmailClick}>{email}</span></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>
    </>
)}

注意事项 #

• 如果接口返回的email可能为空，建议加判空逻辑，避免生成无效的mailto链接
• 你搜索到的React Native相关方案不适用于Web端React，不需要参考

内容的提问来源于stack exchange，提问作者dannuzak