Если у меня есть несколько div, которые отображаются из массива данных с использованием метода array.map() следующим образом:
import React,{ ReactDOM } from 'react'
import { useState,useEffect,useRef } from 'react'
import getResults from '../api/getResults'
...
function Results (props){
const [results,setResults]=useState([])
useEffect(()=>{
setResults(getResults(props.season))},
[props.season])
return (
{results.map((elem,index)=>{
return (
<div key = {index} onClick = {()=/*what should I do to render inside this div?*/>}>{elem}</div>
)
})}
<Details/> //I want to render this jsx inside the clicked div
)
........
}
Как получить ссылку на конкретный щелкнутый div для рендеринга компонента jsx Details внутри этого div? Я пытался использовать хук useRef, но он всегда возвращает последний div.
Отслеживайте выбранный элемент в состоянии. Например, рассмотрим это значение состояния:
const [clickedElement, setClickedElement] = useState();
По умолчанию значение равно undefined
. Вы можете обновить значение до некоторого идентификатора при нажатии на один из элементов:
<div key = {index} onClick = {() => setClickedElement(index)}>{elem}</div>
Теперь каждый щелчок обновляет состояние, указывающее, какой элемент был нажат.
Затем вы можете использовать это значение состояния, чтобы определить, что отображать. Например:
<div key = {index} onClick = {() => setClickedElement(index)}>
{elem}
{clickedElement === index ? <Details/> : null}
</div>
Как бы вы ни подошли к этому, структура практически всегда одинакова: