React JS环境下如何获取td标签的meta自定义属性值？

React 不推荐直接使用原生 DOM 查询方法操作元素，以下是更符合 React 开发逻辑的实现方式： #

方案1：使用 ref 直接获取目标元素 #

适合固定单个 td 元素的场景：

import { useRef } from 'react';

function MyComponent() {
  // 声明ref绑定到目标td上
  const tdRef = useRef(null);

  const getMetaValue = () => {
    // 直接通过ref读取属性
    const metaValue = tdRef.current?.getAttribute('meta');
    console.log(metaValue); // 输出 Special forces
  };

  return (
    <table>
      <tr>
        <td ref={tdRef} meta="Special forces" onClick={getMetaValue}>View</td>
      </tr>
    </table>
  )
}

类组件可使用React.createRef实现，逻辑完全一致。 #

方案2：属性值直接存入变量/状态，完全不操作DOM #

如果 meta 的值是业务侧可控的，优先用状态驱动的逻辑，不需要读取DOM：

function MyComponent() {
  // 提前定义meta属性值
  const tdMetaValue = "Special forces";

  const getMetaValue = () => {
    // 直接使用变量即可，不需要查询DOM
    console.log(tdMetaValue);
  };

  return (
    <table>
      <tr>
        <td meta={tdMetaValue} onClick={getMetaValue}>View</td>
      </tr>
    </table>
  )
}

方案3：列表渲染多td时通过事件对象获取 #

如果是循环生成的多个td，不需要给每个元素加ref，点击时从事件对象读取属性即可：

function MyComponent() {
  const tdList = [
    { id:1, meta: "Special forces", content: "View1" },
    { id:2, meta: "Other value", content: "View2" }
  ];

  const handleTdClick = (e) => {
    const metaValue = e.target.getAttribute('meta');
    console.log(metaValue); // 输出当前点击的td对应的meta值
  };

  return (
    <table>
      <tr>
        {tdList.map(item => (
          <td 
            key={item.id} 
            meta={item.meta} 
            onClick={handleTdClick}
          >
            {item.content}
          </td>
        ))}
      </tr>
    </table>
  )
}

补充注意：自定义属性建议遵循HTML规范使用data-前缀，也就是把属性名写成data-meta，既可以避免和原生属性冲突，获取时也可以直接通过dom.dataset.meta拿到值，调用更简洁。

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