如何将链接复制到从react中的api获取的剪贴板

npm install react react-dom

import React, { useState } from 'react';

const CopyToClipboard = () => {
  const [copied, setCopied] = useState(false);

  const copyToClipboard = () => {
    const link = 'https://example.com'; // 要复制的链接
    navigator.clipboard.writeText(link)
      .then(() => {
        setCopied(true);
      })
      .catch((error) => {
        console.error('Failed to copy:', error);
      });
  };

  return (
    <div>
      <button onClick={copyToClipboard}>复制链接</button>
      {copied && <span>链接已复制到剪贴板！</span>}
    </div>
  );
};

export default CopyToClipboard;

import React from 'react';
import CopyToClipboard from './CopyToClipboard';

const App = () => {
  return (
    <div>
      <h1>复制链接到剪贴板</h1>
      <CopyToClipboard />
    </div>
  );
};

export default App;