ReactJS .map 带有对每个组件的引用
ReactJS .map with a ref to each component
正在努力做到这一点,当用户返回我的 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}
问题是因为我直接在组件上执行此操作吗?
创建一个空对象来保存您的引用。
const allTheRefs = {}
然后在每个 map
迭代中,将 ref 写入该对象,使用映射键作为对象键
{displayUnavail && !displaySearch &&
notAvailable.map((tracker) => (
<IndividualTracker ref={ref => allTheRefs[tracker.pim] = ref } ... />
)
}
执行 map 语句后,allTheRefs
变量将包含所有作为键值对的引用,键是 tracker.pim
值,值是引用本身。
Here is a working codesandbox
正在努力做到这一点,当用户返回我的 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}
问题是因为我直接在组件上执行此操作吗?
创建一个空对象来保存您的引用。
const allTheRefs = {}
然后在每个 map
迭代中,将 ref 写入该对象,使用映射键作为对象键
{displayUnavail && !displaySearch &&
notAvailable.map((tracker) => (
<IndividualTracker ref={ref => allTheRefs[tracker.pim] = ref } ... />
)
}
执行 map 语句后,allTheRefs
变量将包含所有作为键值对的引用,键是 tracker.pim
值,值是引用本身。