在DOM元素中声明数据集属性的哪种方法更适合React？

Question

我想在我的react Elements上声明data-属性，并且我想知道哪种类型的引用更好？

正在执行ref and useRefs吗？

``声明数据-{dataname}```？

还有其他方法吗？

当我使用数据方式时，我在映射中获得了undefiend数据...

    const stuffsList = stuffs.map((stuff) => (
      <div
        id="stuffsList"
        key={stuff.id}
accessKey={stuff.label}
        data-energies={stuff.nutrients.energy}
      >
        {stuff.label} {stuff.cat.child}
      </div>
    ));

我映射了此代码，它只呈现第一个数据，而不是在KEY上发出的数据

这是我尝试过的：

    const stuffsDiv = document.getElementById("stuffsList");

    console.log(stuffsDiv.dataset);

    const newStuff = {
      label: e.target.accessKey,
      energy: stuffsDiv.dataset.energy,
    };

Answer 1

您可以在下面测试代码：

// Example class component
class Thingy extends React.Component {
   constructor(props) {
   super(props)
   this.state = {
      objList:[
         {
            id:"1",
            label:"A",
            type:"APlus"
         },
         {
            id:"2",
            label:"B",
            type:"BPlus"
         }
      ]
    }
    this.refArray =[];
  }
  
 
   
  createDomElements=()=>{
     let keyCount = 0
     let output = this.state.objList.map((obj)=>(
        
           <div className="demoDiv" key={obj.id} id={obj.id} domLabel={obj.lable} data-type={obj.type} ref={domRef=>(this.refArray[obj.id]=domRef)} >{obj.id}</div>
        )
     )
     return output
  }
  
  getDataset=()=>{
     //let stuffsDiv = document.getElementById("1");
     let stuffsDiv = this.refArray[2]
     stuffsDiv.dataset.setAnotherProps = "This is another prop"
     console.log(stuffsDiv.dataset.setAnotherProps)
     console.log(stuffsDiv.dataset.type)
     console.log(stuffsDiv.dataset)
  }
  
  render() {
  
   
    return (
      <div>
         {this.createDomElements()}
         <button type="button" onClick={this.getDataset}>get data-set</button>
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

.demoDiv {
  width:100px;
  height:20px;
  background-color:red;
  margin:10px

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

更新

以及您的问题：

在React中，Dom元素中的delcare数据集属性的哪种方法更好？

domElement.dataset.custome和domElement.getAttribute('data-custome')之间没有区别>

How to access custom attributes from event object in React?

哪种参考类型更好？

我建议React.createref()是引用DOM元素的更好方法。

reactjs this.refs vs document.getElementById

在您的情况下，因为要在映射中使用ref，因此可以首先将ref声明为数组，例如this.refArray=[]（您可以看到我的代码）

使用数据集数据时未定义的问题-

问题出在您的映射代码中，所有元素都具有相同的ID“ stuffsList”

 const stuffsList = stuffs.map((stuff) => (
      <div
        // id="stuffsList"             //This line is wrong
        id={stuff.id}
        key={stuff.id}
        accessKey={stuff.label}
        data-energies={stuff.nutrients.energy}
      >
        {stuff.label} {stuff.cat.child}
      </div>
 ));
它只是呈现第一个数据，而不是在KEY上发送的数据

我不确定您的实际意思，因为在我的代码中，两个映射obj div呈现得很好。我建议您要说的是：记录console.log(stuffsDiv.dataset)时，请始终记录第一个元素的数据属性。原因是在您的代码中，映射的每个元素都具有相同的ID，并且当多个ID相同时，getElementById总是返回第一个元素。

Can multiple different HTML elements have the same ID if they're different elements?