如何使用useRef钩子获取DOM元素的data自定义属性值

可以通过useRef钩子访问DOM元素的data属性，你遇到的报错是两个操作错误导致的：

• 调用时机错误：你在组件渲染的同步执行阶段直接调用getData，此时组件还没完成DOM挂载，boardRef.current 还处于初始的undefined状态，访问其属性自然会抛出对应错误。
• 自定义属性读取写法错误：DOM元素的data-*自定义属性不能直接通过.加data-xxx的方式读取，且data-board里的横杠在JS语法中会被识别为减号运算符，不会被识别为属性名的一部分。

正确实现步骤 #

1. 调整读取ref的时机：需要等DOM挂载完成后再操作，通常可以放在useEffect钩子回调中，或者绑定到按钮点击等用户交互事件上。
2. 采用正确的data属性读取方式，有两种常用写法：
   • 通过dataset对象读取：boardRef.current.dataset.board，所有data-前缀的属性都会被挂载到DOM元素的dataset对象上，属性名自动转为驼峰格式
   • 通过getAttribute方法读取：boardRef.current.getAttribute('data-board')，直接传入完整的属性名字符串即可

修正后代码示例 #

import React, {useState, useRef, useEffect} from 'react';

export default function App() {
  const boardRef = useRef();

  const getData = () => {
    // 两种写法二选一即可
    console.log(boardRef.current.dataset.board); // 输出 one
    console.log(boardRef.current.getAttribute('data-board')); // 输出 one
  }

  // useEffect回调会在DOM挂载完成后执行，此时ref已经指向对应的DOM元素
  useEffect(() => {
    getData();
  }, [])

  return (
    <div className="App">
      <h1>Tic Tac Toe</h1>
      <div ref={boardRef} className="board" id="boardOne" data-board="one"></div>
    </div>
  );
}

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