Создать ref для элементов в цикле

Question

Создать ref для элементов в цикле

Рейтинг: 0Ответов: 1Опубликовано: 10.07.2023

У меня есть массив реакт элементов, который я вывожу с помощи функции map:

{ elemsList.map((item, i) => { 
    return (
        <div 
           key={i}
           ref={refsArr[i]}
           data-grid={item.props["data-grid"]}
           onClick={e => doubleClickHandler(item.key, e)}
           style={{ 
                backgroundColor: i === selectedComponent ? '#828EE3' : "#102f6a", 
                color: "#fff", 
                height: "100%",
           }}
        >
            {item}
        </div>
    )}
) }

Мне нужно создать ref для каждого из элементов этого массива. Я попробовал сделать это использовав useRef, передавая туда массив:

const refsArr = useRef([])
refsArr.current = elemsList.map((item, i) => refsArr.current[i] ?? setTimeout(createRef(), 5000))
...
{ elemsList.map((item, i) => { 
    return (
        <div 
           key={i}
           ref={refsArr[i]}
           data-grid={item.props["data-grid"]}
           onClick={e => doubleClickHandler(item.key, e)}
           style={{ 
                backgroundColor: i === selectedComponent ? '#828EE3' : "#102f6a", 
                color: "#fff", 
                height: "100%",
           }}
        >
            {item}
        </div>
    )}
) }

Проблема в том, что при попытке вывода моего ref-массива в консоль, вместо нормального ref, я получаю объект следующего содержания:

{ current: [53] }

Как можно исправить эту проблему?

javascript reactjs ref

Источник: Stack Overflow на русском

Answer 1

▲ 0

Мне нужно создать ref для каждого из элементов этого массива.

Предложу такой вариант создания массива "рефов" для элементов другого массива...

const arr = ['Один', 'Два', 'Три', 'Четыре']
//
function App() {
  const ref = Array.from({length: arr.length}, (_, i) => React.useRef())
  return <ul onClick={_ => console.log(ref[1].current)}>
    {arr.map((v, i) => <li key={v} ref={ref[i]}>{v}</li>)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

Создать ref для элементов в цикле

Ответы