在与Web共享API的React中建立灵活的共享系统-js教程-PHP中文网

在与Web共享API的React中建立灵活的共享系统

Barbara Streisand

发布： 2025-01-30 02:39:08

原创

895 人浏览过

Building a Flexible Share System in React with the Web Share API

厌倦了由多个第三方共享脚本压制的肿的网站？ Web Share API提供了简化的性能替代方案，利用设备的本机共享功能。该教程展示了建立现代，基于反应的共享系统。

项目设置

首先使用Vite和Typescript创建一个新的React项目：

<code class="language-bash">npm create vite@latest my-share-app -- --template react-ts
cd my-share-app</code>

登录后复制

>安装依赖项：

<code class="language-bash">npm install sonner</code>

登录后复制

用于造型（可选，但建议）：

<code class="language-bash">npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p</code>

登录后复制

>在您的主

组件中添加sonner烤面包提供商：App

<code class="language-typescript">// src/App.tsx
import { Toaster } from 'sonner';

function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      {/* Your app content */}
    </>
  );
}</code>

登录后复制

>>>了解Web共享API

> > Web Share API提供了平台本地共享体验，并与设备的内置共享机制无缝集成。这在移动和桌面上提供了一致的用户体验。

创建共享钩

> >让我们创建一个自定义挂钩（

）来管理共享逻辑：>

src/hooks/useShare.ts

实现故障

<code class="language-typescript">import { toast } from "sonner";

const useShare = () => {
  const copy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success(`Copied ${text} to clipboard!`);
    } catch (error) {
      console.error("Clipboard copy error:", error);
      toast.error("Clipboard copy failed.");
    }
  };

  const share = async (url: string, title: string, description: string) => {
    if (navigator.share) {
      try {
        await navigator.share({ title, text: description, url });
        console.log("Share successful!");
      } catch (error) {
        console.error("Sharing error:", error);
        toast.error("Sharing failed.");
        copy(url); // Fallback to copy
      }
    } else {
      console.error("Web Share API not supported.");
      toast.error("Web Share API not supported. Copying URL instead.");
      copy(url); // Fallback to copy
    }
  };

  return { copy, share };
};

export default useShare;</code>

登录后复制

>提供：

useShare

：使用剪贴板API的剪贴板后备。

：优先考虑Web共享API，如果不可用或失败。 copy
share使用组件中的钩子copy

这是

component（

）：>

及其在中的用法：

ShareButtonsrc/components/ShareButton.tsx>浏览器支持和注意事项

<code class="language-typescript">// src/components/ShareButton.tsx
import { FC } from 'react';
import useShare from '../hooks/useShare';

interface ShareButtonProps {
  url: string;
  title: string;
  description: string;
}

const ShareButton: FC<ShareButtonProps> = ({ url, title, description }) => {
  const { share } = useShare();

  const handleShare = () => {
    share(url, title, description);
  };

  return (
    <button onClick={handleShare}>Share</button>
  );
};

export default ShareButton;</code>

登录后复制

> Web Share API在现代移动和桌面浏览器上获得广泛的支持。记住：

App.tsx

安全上下文（https）。

<code class="language-typescript">// src/App.tsx
import ShareButton from './components/ShareButton';

function App() {
  return (
    <div className="p-4">
      <h1>My Awesome Content</h1>
      <ShareButton 
        url={window.location.href} 
        title="Check out this content!" 
        description="Interesting article about the Web Share API..." 
      />
    </div>
  );
}</code>

登录后复制

用户交互（例如，按钮单击）。> 并非所有数据类型都得到了普遍支持。