Kehren Sie zur vorherigen Position der React-Seite zurück

Question

Stellen Sie sich vor, ich hätte eine sehr lange Liste namens Seite A. Ich scrolle nach unten bis zur Zeile 500. Diese Zeile ist auch ein Link zu Seite B, auf der die Details der Zeile angezeigt werden. Nachdem ich die Details auf Seite B überprüft habe, möchte ich zu Seite A zurückkehren, aber ich möchte zu dem Punkt zurückkehren, an dem ich zu Seite B gegangen bin, nämlich Zeile 500. Wie kann ich dieses Verhalten in einer ReactJS-Anwendung erreichen?

Answer 1

这可以通过两种方式实现。

1. 一种是简单使用html的id属性。
2. 借助于react-router-dom和props传递。

我在这里列出了方法1，适合初学者。

这可以通过id来实现。 我将列出一个类似jsx的示例html代码

<div>
<p id="1">第一行</p>
<p id="2">第二行</p>
...
...
...
</div>

假设页面的使用是www.samplepage.com 如果我将链接具体化，即www.samplepage.com#1 它将带我到第一行，就像在同一页上的锚点标签一样 你可以将标签存储在状态中并使用它。

你也可以在github上看到类似的实现。