如何使用无限列表项处理单击详细信息（并导航回列表）？答案

【问题标题】：How to handle click on details (and navigate back on list) with infinite list item?如何使用无限列表项处理单击详细信息（并导航回列表）？
【发布时间】：2019-07-12 13:27:43
【问题描述】：

我有一个显示项目的无限滚动当我单击一个项目时，它会打开详细信息页面当我返回无限滚动/列表页面时，我需要返回刚刚单击的项目，而不是顶部我怎样才能做到这一点？

几个想法：我应该使用锚链接或类似的链接来选择我想要返回的项目吗？我应该在列表顶部显示详细信息页面吗？

一些细节：无限卷轴分页，可收万件物品我正在使用 ReactJS

谢谢！

【问题讨论】：

请注意，您总是需要在问题旁边分享一些代码，以使其更清晰。在此处查看更多详细信息：stackoverflow.com/help/minimal-reproducible-example

标签： javascript reactjs scroll infinite-scroll

【解决方案1】：

您可以使用scrollIntoView 函数，它完全符合您的要求。假设您的所有商品都由一个唯一的 id 标识：

渲染的 HTML

<div id="container">
  . . .
  <element id="1897">

  </element>
</div>

您的名单位于http://localhost:3001/my_url/list。单击您的元素会将您带到以下地址：http://localhost:3001/mu_url/item/1897。

然后，在您的元素模型中，返回主页的链接应如下所示：

item.jsx

<Link
  . . .
  to={{
    pathname: `/my_url/list?lastPosition=${this.state.id}`
  }}
>

请注意，我们在后退按钮上添加了 URL 参数。将 this.state.id 替换为对您当前项目 ID 的引用，如果它不在这里。然后，在您的主要组件中，您可以添加以下内容：

container.jsx

import React from ‘react’;
. . .

class Container extends React.Component {
  constructor(props) {. . .}

  // React function that trigger once your component is mounted
  componentDidMount() {
    const url = new URL(window.location.href);
    const lastPosition = url.searchParams.get(‘lastPosition’);

    if (lastPosition && element) {
      const element = document.querySelector(`#${lastPosition}`);
      element.scrollIntoView();
    }
  }

  . . .

  render() {
    . . .
  }
}

因此，如果一个元素 id 作为 URL 参数给出，并且找到一个 id 与该参数匹配的元素，您的窗口将自动滚动到它。另外，这允许您将链接发送给其他人，而无需滚动即可找到该项目。

【讨论】：