当前位置：首页 > React

react实现分享功能

2026-01-27 05:25:04React

使用Web Share API实现分享功能

Web Share API是浏览器原生支持的分享功能，适用于移动端和部分桌面端浏览器。

const handleShare = async () => {
  try {
    await navigator.share({
      title: '分享标题',
      text: '分享内容描述',
      url: 'https://example.com', // 分享的链接
    });
  } catch (error) {
    console.error('分享失败:', error);
  }
};

// 调用方式
<button onClick={handleShare}>分享</button>

兼容性注意：需检测navigator.share是否存在，部分浏览器（如IE、旧版Safari）不支持。

集成第三方SDK（如微信、微博）

通过引入官方SDK或第三方库（如react-share）实现社交平台分享。

安装依赖：

npm install react-share

示例代码：

import { FacebookShareButton, TwitterShareButton, WeiboShareButton } from 'react-share';
import { FacebookIcon, TwitterIcon, WeiboIcon } from 'react-share';

const ShareButtons = () => (
  <div>
    <FacebookShareButton url="https://example.com" quote="分享内容">
      <FacebookIcon size={32} round />
    </FacebookShareButton>
    <TwitterShareButton url="https://example.com" title="分享标题">
      <TwitterIcon size={32} round />
    </TwitterShareButton>
    <WeiboShareButton url="https://example.com" title="分享标题">
      <WeiboIcon size={32} round />
    </WeiboShareButton>
  </div>
);

自定义弹窗或下拉菜单

通过React状态管理控制分享弹窗的显隐，结合CSS实现样式。

import { useState } from 'react';

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

  return (
    <div className="share-container">
      <button onClick={() => setIsOpen(!isOpen)}>打开分享菜单</button>
      {isOpen && (
        <div className="share-menu">
          <button onClick={() => window.open('https://twitter.com/intent/tweet?url=YOUR_URL')}>Twitter</button>
          <button onClick={() => window.open('https://www.facebook.com/sharer/sharer.php?u=YOUR_URL')}>Facebook</button>
        </div>
      )}
    </div>
  );
};

样式建议：使用CSS定位（如position: absolute）和动画增强用户体验。

生成分享链接（适用于无SDK场景）

直接拼接URL参数调用各平台分享接口：

Twitter: https://twitter.com/intent/tweet?text=TEXT&url=URL
Facebook: https://www.facebook.com/sharer/sharer.php?u=URL
LinkedIn: https://www.linkedin.com/shareArticle?mini=true&url=URL&title=TITLE

示例：

const shareOnTwitter = () => {
  const url = encodeURIComponent('https://example.com');
  const text = encodeURIComponent('分享内容');
  window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`);
};