在與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>

登入後複製

用戶交互（例如，按鈕單擊）。 > 並非所有數據類型都得到了普遍支持。