你怎么能让 createRef/useRef 不以最后一个值为目标。而是去它应该去的地方

Question

无法使 useRef/createRef 获得任何其他 div 除了最后添加的内容。我怎样才能做到这一点，当单击按钮时 div 的引用发生变化。

我已经尝试使用 useRef 和 createRef。因为我想创建一个新的 ref 实例，所以我更多地研究了 createRef 而不是 useRef。我也玩过 useEffect。但是我的解决方案并没有帮助我解决最大的问题

我做了一个包含 3 个组件的小项目来帮助您理解我要解释的内容。

我还有一个包含模拟数据的数据库 -> 在我的真实项目中这不是问题所在。它是一个包含对象的数组。 [{'id':'1', 'name':'first'},...]

主要：

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

我认为这里的主要思想是为每个元素（引用数组）创建动态引用，这就是为什么在应用程序呈现时只选择最后一个。

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

Answer 2

感谢 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'
    }); 
  }
....

然后我将其传递给 child 并像

一样引用

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

你怎么能让 createRef/useRef 不以最后一个值为目标。而是去它应该去的地方

How can you make a createRef/useRef not target the last value. But rather go to where its suppose to

reference

buttonclick

reactjs

use-effect