React应用中如何通过新标签页打开带预设收件人的Gmail撰写页

直接通过构造带参数的Gmail撰写链接就能实现需求，无需额外依赖，具体方案如下：

核心思路 #

Gmail的撰写页面支持通过URL参数直接预设收件人、主题、正文等内容，你只需要在基础链接后追加对应参数即可，再通过React的点击事件触发在新标签页打开该链接。

代码示例 #

import React from 'react';

const GmailComposeBtn = () => {
  const openGmailCompose = () => {
    // 替换为实际需要预设的收件人地址
    const targetRecipient = 'user@example.com';
    // 构造完整的Gmail撰写链接，encodeURIComponent处理特殊字符
    const composeUrl = `https://mail.google.com/mail/u/0/#inbox?compose=&to=${encodeURIComponent(targetRecipient)}`;
    // 在新标签页打开链接
    window.open(composeUrl, '_blank');
  };

  return (
    <button onClick={openGmailCompose} type="button">
      在Gmail中撰写邮件
    </button>
  );
};

export default GmailComposeBtn;

扩展参数（可选） #

如果需要同时预设主题或正文，只需追加对应的URL参数：

• 主题：&subject=${encodeURIComponent('你的邮件主题')}
• 正文：&body=${encodeURIComponent('邮件正文内容')}

比如构造包含主题和正文的链接：

const composeUrl = `https://mail.google.com/mail/u/0/#inbox?compose=&to=${encodeURIComponent(targetRecipient)}&subject=${encodeURIComponent('项目反馈')}&body=${encodeURIComponent('您好，关于项目有以下问题需要沟通：')}`;

注意事项 #

• 使用encodeURIComponent()对参数值进行编码，避免地址中的特殊字符（如@、空格等）导致URL解析异常
• window.open()的_blank参数确保链接在新标签页打开，符合需求

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