Какой способ объявления атрибута набора данных в элементах DOM лучше для React? - PullRequest
Новая
       4

Какой способ объявления атрибута набора данных в элементах DOM лучше для React?

0 голосов
/ 07 апреля 2020

Я хочу объявить атрибуты данных в моих реагирующих элементах и ​​узнать, какой тип ссылок лучше?

Выполнение ref and useRefs?

`` объявление данных- {dataname } `` `?

- это любой другой способ?

когда я использовал data-way, я получил 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,
    };

1 Ответ

0 голосов
/ 07 апреля 2020

Вы можете проверить коды ниже: 

// 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>

Обновление

Ваши вопросы:

какой путь к delcare Атрибут набора данных в элементе Dom лучше в React?

Нет разницы между этим способом: domElement.dataset.custome и таким образом: domElement.getAttribute('data-custome')

Как получить доступ к пользовательским атрибутам из объекта события в React?

какой тип ссылок лучше?

Я предлагаю React.createref() - лучший способ ссылки на элемент DOM.

reactjs this.refs против 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

Я не уверен, что вы имеете в виду на самом деле, потому что В моем коде хорошо отображаются два отображаемых элемента div. Я предлагаю вам сказать следующее: когда вы регистрируете console.log(stuffsDiv.dataset), всегда регистрируйте атрибуты данных первого элемента. Причина в том, что в вашем коде каждый отображаемый элемент имеет один и тот же идентификатор, а когда несколько идентификаторов равны, getElementById всегда возвращает первый элемент.

Может ли несколько различных элементов HTML иметь один и тот же идентификатор, если они разные элементы?

...