在React中实现复制到剪贴板功能的最优方案是什么？

嘿，作为常年在React项目里摸爬滚打的开发者，我来分享两个最靠谱的实现点击按钮复制文本到剪贴板的方法，都是实际项目中验证过的最优选择：

方法一：使用原生Clipboard API（无依赖，轻量首选） #

现代浏览器已经支持原生的Clipboard API，不需要额外安装任何库，代码简洁还能完全控制流程。适合不想增加项目依赖的场景。

示例代码（函数组件）： #

import { useState } from 'react';

const CopyButton = () => {
  // 存储要复制的目标文本，也可以从props传入
  const [copyText, setCopyText] = useState('这是要复制到剪贴板的内容');
  const [copyStatus, setCopyStatus] = useState('');

  const handleCopy = async () => {
    try {
      // 调用原生API写入剪贴板
      await navigator.clipboard.writeText(copyText);
      setCopyStatus('复制成功！');
      // 3秒后清除提示
      setTimeout(() => setCopyStatus(''), 3000);
    } catch (err) {
      console.error('复制失败:', err);
      setCopyStatus('复制失败，请重试');
    }
  };

  return (
    <div>
      <button onClick={handleCopy}>点击复制</button>
      {copyStatus && <p style={{ color: copyStatus.includes('成功') ? 'green' : 'red' }}>{copyStatus}</p>}
    </div>
  );
};

export default CopyButton;

注意点： #

• 这个API需要在HTTPS环境下使用（本地开发的localhost除外）
• 兼容性：支持Chrome 66+、Firefox 63+、Edge 79+，现在绝大多数现代浏览器都覆盖了，如果需要兼容极老浏览器，可以考虑降级方案（比如创建隐藏textarea的传统方法，但现在已经很少用了）
• 一定要给用户反馈！复制成功/失败的提示能提升体验，不然用户不知道操作有没有生效

方法二：使用第三方库react-copy-to-clipboard（快速实现，省心首选） #

如果想更快搭建功能，不想自己处理异常和细节，react-copy-to-clipboard是个成熟的选择，它封装了原生API和降级方案，使用起来非常便捷。

步骤： #

1. 先安装库：

npm install react-copy-to-clipboard --save
# 或者用yarn
yarn add react-copy-to-clipboard

2. 组件示例：

import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

const CopyButton = () => {
  const [copyText, setCopyText] = useState('这是要复制的内容');
  const [copyStatus, setCopyStatus] = useState('');

  return (
    <div>
      <CopyToClipboard
        text={copyText}
        onCopy={() => {
          setCopyStatus('复制成功！');
          setTimeout(() => setCopyStatus(''), 3000);
        }}
      >
        <button>点击复制</button>
      </CopyToClipboard>
      {copyStatus && <p style={{ color: 'green' }}>{copyStatus}</p>}
    </div>
  );
};

export default CopyButton;

优势： #

• 自动处理浏览器兼容性，在不支持原生API的环境下会用传统的textarea方法降级
• API简单，只需要包裹按钮组件，传入要复制的文本和回调即可
• 体积很小，不会给项目增加太多负担

总结 #

• 如果追求轻量、无依赖，选原生Clipboard API
• 如果想快速实现、省心兼容，选react-copy-to-clipboard

这两个方案都是目前React项目中实现复制剪贴板功能的最优解，根据你的项目需求选就行~

内容的提问来源于stack exchange，提问作者meez