Javascript 如何将焦点移动到react js中的项目？

我已经在我的演示应用程序中实现了一个带有无限滚动的列表。单击任意一行，它将进入

详细信息屏幕

。它工作得很好

**我面临的问题是如何聚焦最后选定的行**，换句话说

运行应用程序。它首先加载20个项目。滚动到底部可加载20多个项目

然后单击任意项目，例如

33

rd行。它将在详细信息页面中显示

33

现在点击

back

按钮，它显示焦点在

0

或第一行。我想将焦点移动到

33

行。或者将滚动位置移动到

33

位置

我使用

useContext

api来存储

项

（直到最后一次滚动的所有行/数据）和

所选项

（所选索引）

这是我的密码

从“React”导入React；
从“react router dom”导入{withRouter}；
从“/context”导入{useListState}；
函数详细信息（{位置，历史记录}）{
const state=useListState（）；
console.log（状态）；
返回(
{
历史。替换({
路径名：“/”
});
}}
>
返回
{location.state.key}
细节
);
}
使用路由器导出默认值（详细信息）；
有更新吗？

在重定向到详细页面并将其存储在状态之前，请使用此选项

let position = document.documentElement.scrollTop

这将给出您在页面上的当前位置。返回列表视图后，请使用

window.scrollTo(0, position)

---

回到你最初的位置。

你的元素位置可以有一个单一的真相来源。作为一个例子，我把位置的状态放在路由器组件上，因为这似乎是应用程序组件&Details的父级

const Router = () => {

  const [previousClickedItemPos, setPreviousClickedItemPos] = useState(0);
  
  /* import useLocation so that useEffect can be invoked on-route-change */
  const location = useLocation();

  /* basically pass this to the list items so you can update position on-click */
  function handleClickList(element) {
    setPreviousClickedItemPos(element);
  }

  useEffect(() => {
    /* scroll to the element previously selected */
    window.scrollTo(0, previousClickedItemPos);
  }, [previousClickedItemPos, location]);

  ...

---

在无限列表组件上：

<ListItem
    onClick={e => {
        dispatch({
            type: "set",
            payload: items
        });
        handleClickList(e.target.offsetTop); /* update position state */
        goDetailScreen(item);
    }}
    key={item.key}
>
    {item.value}
</ListItem>

{
派遣({
类型：“设置”，
有效载荷：项目
});
handleClickList（e.target.offsetTop）；/*更新位置状态*/
goDetailScreen（项目）；
}}
key={item.key}
>
{item.value}

代码沙盒：

<ListItem
    onClick={e => {
        dispatch({
            type: "set",
            payload: items
        });
        handleClickList(e.target.offsetTop); /* update position state */
        goDetailScreen(item);
    }}
    key={item.key}
>
    {item.value}
</ListItem>