React项目中如何用JavaScript获取div自定义属性tooltiptext的值？

你的问题出在tooltiptext是自定义HTML属性，不是DOM元素的标准内置属性，所以不能直接通过target.tooltiptext这种点语法访问。下面是几种可行的解决方法：

方法1：使用getAttribute()方法 #

这是获取自定义属性最直接的方式，适用于所有自定义属性：

const target = document.getElementById('Creator');
const tooltipText = target.getAttribute('tooltiptext');
console.log(tooltipText); // 输出 "Melder"

方法2：改用标准data-*属性（推荐） #

按照HTML规范，自定义属性应该以data-开头命名，这样可以通过DOM元素的dataset对象直接访问，更符合标准：

1. 修改你的React元素：

<div
  className="td-creator"
  id="Creator"
  data-tooltiptext="Melder"
  onMouseOver={setToolTip}
  onMouseOut={hideToolTip}
>

2. 获取属性值：

const target = document.getElementById('Creator');
const tooltipText = target.dataset.tooltiptext;
console.log(tooltipText); // 输出 "Melder"

方法3：React中使用Ref替代直接操作DOM（最佳实践） #

在React项目里，直接用getElementById操作DOM不是最优方案，推荐使用React的useRef钩子来获取元素引用：

import { useRef } from 'react';

function YourComponent() {
  const creatorRef = useRef(null);

  const setToolTip = () => {
    // 方法1：用getAttribute获取原属性
    const tooltipText = creatorRef.current.getAttribute('tooltiptext');
    // 或者如果改了data-*属性：
    // const tooltipText = creatorRef.current.dataset.tooltiptext;
    
    // 这里处理tooltip逻辑
  };

  return (
    <div
      className="td-creator"
      id="Creator"
      tooltiptext="Melder"
      ref={creatorRef}
      onMouseOver={setToolTip}
      onMouseOut={hideToolTip}
    >
      {/* 元素内容 */}
    </div>
  );
}

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