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

当用户返回我的react应用程序中的页面时，他们将滚动到他们以前所在页面上的位置。具体来说，是指向他们单击的列表中的项目

目前的做法是使用以下方法： 常量scrollToRef=ref=>window.scrollTo0，ref.current.offsetTop

除了redux跟踪要滚动到的ref之外，还有一个useffect钩子在页面加载时滚动到该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}

---

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

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

常数allTheRefs={} 然后在每个映射迭代中，使用映射键作为对象键，将ref写入该对象

---

{displayunail&！displaySearch&& notAvailable.maptracker=> allTheRefs[tracker.pim]=ref}…/> } 执行map语句后，allTheRefs变量将包含所有作为键值对的引用，键值为tracker.pim值，值为引用本身

---

如何创建列表refs.current？const refs=React.useRefReact.createRef；是的，那不是你用钩子的方式。阅读useRef的文档，但我认为下面的答案很好。谢谢你的回答。然而，这似乎不起作用。即使在.map被执行之后，allTheRefs仍然是空的。我不确定您的代码的整体结构-也许您可以发布更多的上下文。您使用的是哪种组件？我的答案是在功能组件中使用。如果您在类组件中，则必须将其编写为allTheRefs={}，ref={ref=>this.allTheRefs[tracker.pim]=ref}。确保在函数或类scope.Functional组件的根级别声明了const allTheRefs={}或allTheRefs={}。allTheRefs是在组件{displayUnavail&&！displaySearch？notAvailable.maptracker=>allTheRefs[tracker.pim]=ref}id={tracker.pim}tracker={tracker}key={tracker.pim}history/>：null}Refs在页面完成渲染时只是一个空对象