ReactJS .map 带有对每个组件的引用

Question

正在努力做到这一点，当用户返回我的 React 应用程序中的页面时，他们将滚动到他们之前所在页面上的位置。具体来说，他们点击了列表中的项目。

目前的方法是使用下面的 const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)

与 redux 一起跟踪 ref 以滚动到 & useEffect 挂钩以在页面加载时滚动到该 ref。

但是我的 .map 似乎无法获得任何引用。

const refs = React.useRef(React.createRef());




      {displayUnavail && !displaySearch
        ? notAvailable.map((tracker) => (
            <IndividualTracker ref={refs.current[tracker]} tracker={tracker} key={tracker.pim} history />
          ))
        : null}

问题是因为我直接在组件上执行此操作吗？

Answer 1

创建一个空对象来保存您的引用。

const allTheRefs = {}

然后在每个 map 迭代中，将 ref 写入该对象，使用映射键作为对象键

{displayUnavail && !displaySearch && 
  notAvailable.map((tracker) => (
    <IndividualTracker ref={ref => allTheRefs[tracker.pim] = ref } ... />
  )
}

执行 map 语句后，allTheRefs 变量将包含所有作为键值对的引用，键是 tracker.pim 值，值是引用本身。

ReactJS .map 带有对每个组件的引用

ReactJS .map with a ref to each component

javascript

reactjs

refs

Here is a working codesandbox