Как сделать так, чтобы createRef / useRef не предназначался для последнего значения. А лучше иди туда, где его предполагают

Question

Не удается использовать useRef / createRef, чтобы получить любые другие элементы div, отличные от того, что был добавлен последним.Как я могу сделать так, чтобы при нажатии кнопки ссылка на div изменялась.

Я пробовал использовать useRef и createRef.Поскольку я хочу создать новый экземпляр ref, я больше посмотрел на createRef, чем на useRef.Я также играл вокруг useEffect.Но мое решение не помогло мне решить мою самую большую проблему

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

У меня также есть база данных, содержащая фиктивные данные -> в моем реальном проекте это не проблема.Это массив, содержащий объекты.[{'id': '1', 'name': 'first'}, ...]

Main:

const MainComponent = () => {
    const dataRef = React.createRef(null) 

    React.useEffect (() => {
        if(dataRef && dataRef.current){
            dataRef.current.scrollIntoView({ behavior:'smooth', block:'start' })
       }
    },[dataRef])

    const _onClick = (e) => {
        dataRef.current.focus(); 
    }

    return(
        <>
        {data && data.map((entry, index) =>{
            return <ButtonList 
                key={index}
                entry={entry}
                onClick={_onClick}
            /> 
        })}

        {data && data.map((entry, index) =>{
            return <ListingAllData  
                key={index}
                dataRef={dataRef}
                entry={entry}
                index={index}/>
        })}
        </>
    )
}

Компонент кнопки

const ButtonList = ({ entry, onClick }) => {
    return <button onClick={onClick}>{entry.name}</button>
}

Перечисление компонента данных

const ListingAllData = (props) => {
    const {entry, dataRef } = props; 
    return (
        <div ref={dataRef}>
            <p>{entry.id}</p>
            <p>{entry.name}</p>
        </div>
    );
}

Я записал в консоль data.current, он выбирает только последний элемент.Я надеялся, что он найдет ту кнопку, на которую нажал.

Answer 1

Спасибо Janiis за ответ, мое решение было:

в главном компоненте

...
  const refs = data.reduce((acc, value) => {
    acc[value.id] = React.createRef();
    return entry;
  }, {});

  const _onClick = id => {
    refs[id].current.scrollIntoView({
      behavior: 'smooth', 
      block: 'start'
    }); 
  }
....

затем я передал это ребенку и сослался как

<div ref={refs[entry.id]}>

Answer 2

Я думаю, что основная идея здесь заключается в создании динамических ссылок для каждого элемента (массива ссылок), поэтому при выводе приложения выбирается только последний.

const MainComponent = () => {
  const dataRefs = [];

  data.forEach(_ => {
    dataRefs.push(React.createRef(null));
  });

  const _onClick = (e, index) => {
    dataRefs[index].current.focus();
    dataRefs[index].current.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  };

  return (
    <>
      {data &&
        data.map((entry, index) => {
          return (
            <ButtonList
              key={index}
              entry={entry}
              onClick={e => _onClick(e, index)}
            />
          );
        })}

      {data &&
        data.map((entry, index) => {
          return (
            <>
              <ListingAllData
                key={index}
                dataRef={dataRefs[index]}
                entry={entry}
                index={index}
              />
            </>
          );
        })}
    </>
  );
};

Создан рабочий пример в песочнице кода.

https://codesandbox.io/s/dynamic-refs-so25v