React 中如何实现代码块内容一键复制到剪贴板功能

方案1：React场景下封装公共CodeBlock组件（推荐） #

你项目里用到了react-copy-to-clipboard和React语法，直接封装通用组件一次开发，所有代码块复用即可，不用重复写复制逻辑，也不用单独存代码变量：
首先定义组件：

import CopyToClipboard from 'react-copy-to-clipboard';

// 公共代码块组件
const CodeBlock = ({ children, targetVal = '' }) => {
  // 自动替换模板变量为实际值，匹配你示例里的{this.state.target}语法
  const processedCode = children.replace(/\{this\.state\.target\}/g, targetVal);
  
  return (
    <div style={{ position: 'relative', margin: '12px 0' }}>
      {/* 复制按钮固定在右上角，和Bootstrap文档样式对齐 */}
      <CopyToClipboard text={processedCode}>
        <button style={{
          position: 'absolute',
          top: '8px',
          right: '8px',
          padding: '4px 8px',
          fontSize: '12px',
          border: '1px solid #e9ecef',
          borderRadius: '4px',
          cursor: 'pointer'
        }}>
          复制
        </button>
      </CopyToClipboard>
      <pre style={{ padding: '16px', background: '#f8f9fa' }}>
        <code>{processedCode}</code>
      </pre>
    </div>
  );
};

业务代码里直接调用即可，所有代码块都统一用这个组件包裹：

// 你原来的代码只需要改外层包裹，内容不用动
<CodeBlock targetVal={this.state.target}>
mycommand -e {this.state.target}
</CodeBlock>

渲染后显示的代码、复制的内容都会自动替换成实际值，比如this.state.target为hi.zip时，复制结果就是你需要的mycommand -e hi.zip。

方案2：无框架/静态站点场景，全局注入原生JS逻辑 #

如果你的站点是静态HTML，不需要改现有代码结构，直接把下面的脚本加入站点公共JS文件即可，所有现有代码块会自动添加复制按钮：

document.addEventListener('DOMContentLoaded', () => {
  // 遍历页面所有pre标签
  document.querySelectorAll('pre').forEach(preEl => {
    preEl.style.position = 'relative';
    // 生成复制按钮
    const copyBtn = document.createElement('button');
    copyBtn.innerText = '复制';
    copyBtn.style.cssText = `
      position: absolute;top: 8px;right: 8px;padding: 4px 8px;
      background: #fff;border: 1px solid #ddd;border-radius: 4px;
      font-size: 12px;cursor: pointer;
    `;
    // 绑定复制事件
    copyBtn.addEventListener('click', async () => {
      // 读取当前代码块的内容
      let codeContent = preEl.querySelector('code').textContent;
      // 替换模板变量为实际值，按需调整替换规则
      codeContent = codeContent.replace(/\{this\.state\.target\}/g, 'hi.zip');
      // 写入剪切板
      await navigator.clipboard.writeText(codeContent);
      copyBtn.innerText = '成功';
      setTimeout(() => copyBtn.innerText = '复制', 1500);
    });
    preEl.appendChild(copyBtn);
  });
});

这个方案零侵入，不需要修改原有几百个代码块的代码，直接全局生效。

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