React Hooks：如何访问自定义属性值？

问题描述

我想使用反应钩子访问自定义属性值

这是代码

<div ref={cardNameRef} value="card-1" card-status="yes">Card 1</div>

<button onClick ={setData} className="btn btn-info">Select</button>

我想访问 card-status value。

这是我尝试过的

......
const cardNameRef = useRef();
 ....
  const setData = () => {
    let status = cardNameRef.current.getAttribute('cardStatus');
    console.log('status',status);
  }

不幸的是，我得到以下status null

这里出了什么问题？

解决方法

您可以通过以下代码获取自定义属性。

function CustomAttr() {
  const cardNameRef = useRef();
  const setData = () => {
    let status = cardNameRef.current.getAttribute("card-status");
    console.log("status",status);
  };
  return (
    <div>
      <div ref={cardNameRef} value="card-1" card-status="yes">
        Card 1
      </div>

      <button onClick={setData} className="btn btn-info">
        Select
      </button>
    </div>
  );
}

,

作为一般规则，您需要按原样使用属性或道具名称。如果您称其为 card-status，请使用 card-status。如果您将其称为 cardStatus，则使用 cardStatus。 所以这应该有效：

let status = cardNameRef.current.getAttribute('card-status');

就您而言，card-status 无论如何都不是标准的 div 属性。我建议将其更改为 data-status 或 data-cardStatus。