Question

我有一个母版页。在此页面中是列表和“加载更多”按钮。最初，该应用程序显示100个项目。每次用户单击“加载更多”按钮时，它都会加载100多个项目并将其附加到列表中。如果有很多项目，该列表可能会变得很长，并且用户可能会滚动很长一段时间。

在滚动时，用户可以单击任何项目，它将转到详细信息页面。然后，详细信息页面需要显示有关该项目的一些信息。在此页面上也应该是一个后退按钮。当按下此后退按钮时，它需要返回到母版页，但是母版页的外观必须与进入详细页面之前的外观完全相同。它应该具有相同的滚动位置以及之前在此处加载的所有相同项目。这是问题所在，因为我无法做到这一点。

我曾经尝试过使用react-router，但是导航到新路线并返回母版页时，始终只会呈现原始页面，并且滚动位置在顶部，并且只加载了最初的100个项目。

我读到我应该保存滚动位置以及从服务加载的每个项目，以将其保存在本地存储中。然后，当回到主服务器时，再次加载所有内容。问题是如果我有1000个项目，这将花费很长时间，并且用户可用性不是很好。我本质上是希望母版页的整个状态始终保持不变。

我也尝试过类似{!this.state.isPageOneHidden && <showPageOne> }的操作，但我会切换此状态，但是会出现相同的问题。切换此属性后，该组件将被销毁，切换回该属性后，将从头开始重新创建母版页，然后返回顶部，仅显示最初的100个项目。

function BasicExample() {
  return (
    <Router>
        <Route exact path="/" component={Master} />
        <Route path="/detail/:id" component={Detail} />
    </Router>
  );
}

function Master() {
  return (
    <div>

      /*
        Everytime the Load More button is pressed it makes a call to a service and gets some data to append to the list
      */
      {someArray.map(item => (

           <MyItem key={item.id} dataObject={post} onClick="this.goToDetailPage" />

        ))}

      <Button>Load 10 More</Button>
    </div>
  );
}


function Detail() {
  return (
    <div>

     /*
        Show some detail information here. There should be a back button to transition back to the master page.
     */
    </div>
  );
}


export default BasicExample;

Answer 1

据我了解，即使页面不再可见，您也希望状态保持不变。我可以想到的最简单的方法是始终保持母版页处于渲染状态，而在要显示详细信息页时将display: none放在其上。

另一种方法是将Master状态存储在像redux这样的全局状态管理系统中，因此，即使组件的本地状态消失了，您仍然可以保留redux状态并使用它。

最后，您可以将应用程序的状态存储在localStorage中，然后在母版页的构造函数中从中恢复状态。

Reactjs-大师详细信息导航-返回时，大师应处于相同位置

1 个答案: