当前位置：首页 > React

react 实现分享功能

2026-01-27 08:46:29React

使用Web Share API实现分享功能

Web Share API是浏览器原生提供的分享接口，适合在支持该API的现代浏览器中使用。调用方式简单，但需注意兼容性检测。

if (navigator.share) {
  navigator.share({
    title: '分享标题',
    text: '分享内容描述',
    url: 'https://example.com'
  })
  .catch(error => console.log('分享失败:', error));
} else {
  // 降级方案
  alert('当前浏览器不支持原生分享');
}

通过第三方SDK集成分享

对于更广泛的分享支持，可集成第三方SDK如react-share库。安装后即可快速实现主流社交平台分享按钮。

npm install react-share

import {
  FacebookShareButton,
  TwitterShareButton,
  EmailShareButton,
  FacebookIcon,
  TwitterIcon,
  EmailIcon
} from 'react-share';

function ShareButtons() {
  const shareUrl = 'https://example.com';
  const title = '分享内容标题';

  return (
    <div>
      <FacebookShareButton url={shareUrl} quote={title}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>

      <TwitterShareButton url={shareUrl} title={title}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>

      <EmailShareButton url={shareUrl} subject={title}>
        <EmailIcon size={32} round />
      </EmailShareButton>
    </div>
  );
}

自定义分享面板实现

创建自定义分享组件可完全控制UI和交互逻辑。通过状态管理控制面板显示，组合多种分享方式。

import { useState } from 'react';

function CustomShare() {
  const [isOpen, setIsOpen] = useState(false);

  const copyLink = () => {
    navigator.clipboard.writeText(window.location.href);
    alert('链接已复制');
  };

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        分享
      </button>

      {isOpen && (
        <div className="share-panel">
          <button onClick={copyLink}>复制链接</button>
          <a 
            href={`mailto:?subject=分享&body=${window.location.href}`}
            target="_blank"
          >
            邮件分享
          </a>
        </div>
      )}
    </div>
  );
}

移动端唤起原生分享

在React Native或PWA应用中，可通过特定链接协议唤起系统分享界面。这种方式能获得更好的移动端用户体验。

// 通用链接分享
const shareApp = () => {
  window.open(`whatsapp://send?text=${encodeURIComponent(shareContent)}`);
};

// React Native中的分享
import { Share } from 'react-native';

const onShare = async () => {
  try {
    await Share.share({
      message: '分享内容',
    });
  } catch (error) {
    console.error(error);
  }
};