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

【问题标题】：React Hooks : How to access custom attribute value?React Hooks：如何访问自定义属性值？
【发布时间】：2021-06-13 07:15:14
【问题描述】：

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

这里是代码

<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

这里有什么问题？

【问题讨论】：

你试试getAttribute('card-status')

标签： javascript reactjs custom-attributes use-ref

【解决方案1】：

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

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>
  );
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：