React Hooks中如何正确获取DOM元素的自定义属性值

问题根因 #

• 原生DOM提供的getAttribute()方法对属性名是严格全字符匹配的，不存在驼峰命名自动转换的兼容逻辑
  你在div标签上实际定义的属性名是短横线分隔的card-status，但调用方法时传入的是驼峰格式的cardStatus，二者名称完全不匹配，方法自然检索不到对应属性，返回null
• 补充注意：非data-前缀的自定义属性虽能被多数浏览器兼容渲染，但不符合W3C HTML规范，跨场景运行时容易出现兼容隐患，也可能被React的渲染逻辑过滤掉不挂载到真实DOM上

修正方案 #

最小改动修正现有代码 #

仅需将getAttribute的参数替换为和DOM上完全一致的属性名即可正常取值：

const setData = () => {
  let status = cardNameRef.current.getAttribute('card-status');
  console.log('status', status); // 控制台可正常输出 "yes"
}

符合规范的长期推荐写法 #

按照HTML标准将自定义属性调整为data-前缀格式，一方面能保证React渲染的兼容性，确保属性一定被挂载到真实DOM上，另一方面也可以通过DOM的dataset接口更便捷地取值，无需手写getAttribute：

1. 调整标签上的属性定义：

   <div ref={cardNameRef} value="card-1" data-card-status="yes">Card 1</div>
   

2. 读取逻辑改为通过dataset获取值：

   const setData = () => {
     // dataset会自动将短横线分隔的data-*属性映射为驼峰命名
     let status = cardNameRef.current.dataset.cardStatus;
     console.log('status', status); // 控制台可正常输出 "yes"
   }
   

内容的提问来源于stack exchange，提问作者The Dead Man