ReactJs 16 中的自定义属性不起作用

Question

我有一个按钮，我想将自定义属性传递给它。我使用了 data-*，但它没有显示在 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;
}

仅供参考，我正在使用 React 16.14.0

我尝试通过 .getAttribute() 方法获取属性，但我得到的是 null。我什至添加了一个事件监听器“DOMConetentLoaded”，以便 DOM 完全加载然后获取元素，如下所示：

  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);
      }
    });
  },[]);

我在一个函数中有上述逻辑，但我想测试一下，所以我添加了 useEffect 以方便使用。

我哪里出错了？

Answer 1

您正在等待一个已加载的元素，因为 Javascript 运行

useEffect

，这意味着

DOMContentLoaded

已加载，侦听该事件将不会运行其回调函数。只需删除监听器即可。

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

注意：这仅解释了为什么它不起作用，因为您可以进行条件渲染，因此始终建议使用

refs

代替或将类数组传递给元素本身