Блог

Есть ли способ получить доступ key к компоненту, созданному на карте, как показано ниже…

 data.map((data, index) => 
  <li 
    key={ index }
    onClick={ handleClick }
  >{ data }</li>
)
 

…или требуется data атрибут для хранения и доступа к index подобному в приведенном ниже примере

 data.map((data, index) => 
  <li 
    key={ index }
    data-index={ index }
    onClick={ handleClick }
  >{ data }</li>
)
 

key Опора используется React только для целей оптимизации рендеринга. Его нельзя увидеть в DOM. Поэтому , если вы хотите получить доступ к индексу изнутри handleClick , вам нужно каким — то образом ввести значение в DOM-например, с помощью вашего data-index .

Для данной конкретной ситуации другим вариантом может быть передача его handleClick , например:

 data.map((data, index) => 
  <li 
    key={ index }
    onClick={ e => handleClick(e, index) }
  >{ data }</li>
)