React 16.14.0自定义data属性不显示及获取失败问题排查

问题描述 #

在React 16.14.0中给按钮添加了data-id="ppppppp"自定义属性，但该属性未在DOM中显示，调用getAttribute()获取时返回null。尝试通过useEffect监听DOMContentLoaded事件确保DOM加载完成后再获取元素，问题仍未解决。

按钮代码片段 #

<div className="btn-group" id="dvConfigure">
  <button
    id="btnConfigure"
    data-id="ppppppp"
    onClick={() => {
      onButtonClick("btnConfigure", "Configure");
      setIsButtonClicked(true);
    }}
  >
    <div className="configureIcon">
      <Icon name="home" size="small" />
    </div>
    <span>{I18n.get("Home")}</span>
  </button>
</div>

对应CSS #

.btn-group button {
  border: 0px;
  background-color: #efefef; /* Green background */
  cursor: pointer; /* Pointer/hand icon */
  width: 120px; /* Set a width if needed */
  height: 135px;
  font-size: medium;
  font-weight: 500;
  border-radius: 0em;
  color: #434242;
  display: block; /* Make the buttons appear below each other */
}
.btn-group__active {
  border: 0px;
  background-color: white;
  cursor: pointer; /* Pointer/hand icon */
  width: 120px; /* Set a width if needed */
  height: 135px;
  font-size: medium;
  font-weight: 500;
  border-radius: 0em;
  color: #434242;
  display: block; /* Make the buttons appear below each other */
}
.btn-group__active button:hover {
  background-color: white;
}
.btn-group__active button:active {
  background-color: white;
}

.btn-group button:hover {
  background-color: white;
}
.btn-group button:active {
  background-color: white;
}
.btn-group button:focus {
  background-color: white;
}

获取元素的代码 #

useEffect(() => {
  window.addEventListener("DOMContentLoaded", () => {
    var button = document.getElementById("btnConfigure");
    console.log("loaded!!");
    if (button && button.hasAttribute("data-buttonisClicked")) {
      let data = button.getAttribute("data-buttonisClicked");
      console.log("data", data);
    }
  });
},[]);

错误分析与解决方法 #

1. 属性名完全不匹配 #

你在按钮上定义的是data-id="ppppppp"，但获取时却在检查data-buttonisClicked属性，二者完全不对应，这是返回null的直接原因。

2. 无需监听DOMContentLoaded #

React中，空依赖的useEffect会在组件挂载完成后执行，此时组件对应的DOM已经渲染到页面中。DOMContentLoaded是页面初始HTML加载完成时触发的事件，组件挂载往往在这之后，所以你的监听可能永远不会触发。

3. 修正后的获取代码 #

直接在useEffect中获取元素，同时修正属性名：

useEffect(() => {
  const button = document.getElementById("btnConfigure");
  if (button) {
    const dataId = button.getAttribute("data-id");
    console.log("data-id的值:", dataId); // 会输出"ppppppp"
  }
}, []);

4. 更符合React范式的写法：使用Ref #

如果需要频繁操作该DOM元素，推荐用React的useRef获取，避免直接操作DOM：

import { useRef, useEffect } from 'react';

// 组件内部
const btnRef = useRef(null);

useEffect(() => {
  if (btnRef.current) {
    const dataId = btnRef.current.getAttribute("data-id");
    console.log("data-id的值:", dataId);
  }
}, []);

// 按钮上绑定ref
<button
  ref={btnRef}
  id="btnConfigure"
  data-id="ppppppp"
  onClick={() => {
    onButtonClick("btnConfigure", "Configure");
    setIsButtonClicked(true);
  }}
>
  {/* ...按钮内容 */}
</button>

关于data-id未显示在DOM中的排查 #

如果确认代码中已添加data-id但DOM中看不到，检查以下几点：

• 是否有其他代码动态修改或移除了该属性
• 组件是否因条件渲染未被挂载到DOM中
• 打开浏览器开发者工具的Elements面板，确认按钮元素是否存在，以及属性是否被正确渲染

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