React中如何实现map生成的列表元素点击复制文本到剪贴板

核心实现思路 #

完全避开需要直查业务DOM的老旧写法，利用map遍历的闭包作用域天然就能拿到每个渲染节点对应的文本值，根本不需要用querySelector从DOM上读取内容，完全符合React的开发规范。

具体代码实现 #

1. 编写无DOM依赖的copyToClipboard函数 #

优先使用现代浏览器原生的Clipboard API实现，全程不需要操作任何已渲染的页面业务元素：

// 函数接收需要复制的文本作为入参，无额外DOM依赖
async function copyToClipboard(textToCopy) {
  try {
    await navigator.clipboard.writeText(textToCopy)
    // 可在此处添加复制成功的反馈，比如轻提示、状态变更
    console.log('复制成功')
  } catch (error) {
    // 兜底处理权限异常等场景
    console.log('复制失败，请手动操作')
  }
}

2. 修改原有map渲染的事件绑定 #

原写法的核心问题是调用copyToClipboard时没有透传当前遍历项的文本值，只需要在事件触发时把对应的el传入函数即可：

const array = ['Email', 'Phone', 'Address']
const arrayrow = array.map(el => {
  return (
    <p 
      onClick={() => copyToClipboard(el)}
      style={{ cursor: 'pointer' }} // 增加可点击的视觉提示
    >
      {el}
    </p>
  )
})

注意事项 #

• 整个流程没有侵入操作任何已渲染的业务组件DOM，没有直查DOM的逻辑，不会和React的虚拟DOM diff逻辑产生冲突
• 浏览器Clipboard API存在安全限制，仅支持在HTTPS环境、localhost本地开发环境下调用，常规项目的开发、部署场景基本都能满足要求
• 如果需要兼容不支持Clipboard API的老旧浏览器，可使用离屏临时节点的兜底逻辑：创建临时textarea元素、写入待复制文本、选中执行复制操作后立刻移除临时节点，全程不需要查询业务代码的DOM节点，不会破坏React的渲染逻辑隔离

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