使用react-share如何在社交平台及邮件中分享内容时附带链接？

嘿，我来帮你搞定react-share的分享链接问题！首先得明确：react-share的每个分享组件本身就内置了跳转/分享逻辑，不需要额外嵌套a标签，嵌套反而会导致事件冲突，这就是你之前尝试a标签无效的核心原因。下面是各个主流平台的具体实现思路：

1. 先搞定基础配置 #

如果还没安装依赖，先执行这步：

npm install react-share
# 或者用yarn
yarn add react-share

所有分享组件基本都支持url属性——这就是你要附带的分享链接，另外还能按需配置标题、描述等参数，完全不用自己折腾a标签。

2. 各平台具体实现示例 #

Twitter分享 #

用TwitterShareButton组件，通过url传目标链接，title设置分享文案：

import { TwitterShareButton, TwitterIcon } from 'react-share';

const ShareSection = () => {
  const targetUrl = 'https://your-awesome-content.com';
  const shareText = '挖到一个超棒的内容，快来看看！';

  return (
    <TwitterShareButton
      url={targetUrl}
      title={shareText}
    >
      <TwitterIcon size={32} round />
    </TwitterShareButton>
  );
};

Facebook分享 #

用FacebookShareButton，url传链接，quote可以设置引用文案：

import { FacebookShareButton, FacebookIcon } from 'react-share';

const ShareSection = () => {
  const targetUrl = 'https://your-awesome-content.com';
  const shareQuote = "这个内容必须分享给我的好友们！";

  return (
    <FacebookShareButton
      url={targetUrl}
      quote={shareQuote}
    >
      <FacebookIcon size={32} round />
    </FacebookShareButton>
  );
};

邮件分享 #

用EmailShareButton，可以配置邮件主题、正文，直接把链接嵌入正文里：

import { EmailShareButton, EmailIcon } from 'react-share';

const ShareSection = () => {
  const targetUrl = 'https://your-awesome-content.com';
  const emailSubject = "我发现了一个好内容！";
  const emailBody = `快戳链接看看：${targetUrl}`;

  return (
    <EmailShareButton
      url={targetUrl}
      subject={emailSubject}
      body={emailBody}
    >
      <EmailIcon size={32} round />
    </EmailShareButton>
  );
};

3. 踩坑提醒 #

• 立刻移除你之前加的a标签！react-share的按钮组件内部已经是可点击元素（要么是button要么是原生a标签），嵌套会导致点击事件冲突，直接失效。
• url必须是完整的绝对路径（比如带https://），部分平台不认相对路径。
• 要是想自定义分享弹窗的大小，给组件加windowWidth和windowHeight属性就行，比如windowWidth={550} windowHeight={400}。

这样操作下来，就能顺利实现带链接的多平台分享啦！

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