gpt4 book ai didi

javascript - 在 react 中保持状态和滚动位置

转载 作者:行者123 更新时间:2023-11-30 19:04:49 24 4
gpt4 key购买 nike

我正在尝试构建一个显示博客文章列表的组件。当用户单击帖子时,它会呈现显示帖子详细信息的组件。但是,当用户点击浏览器中的后退按钮时,带有帖子列表的先前组件会重新呈现,并且它会丢失先前的状态和滚动位置。有没有一种方法可以保存以前的状态和滚动位置,以便当用户点击后退按钮时,他们处于同一位置并且不会重新呈现帖子列表并且也不会松开滚动位置?

这是我的博客列表组件代码:

import axios from "axios";
import { Link } from "react-router-dom";

class About extends React.Component {
state = { posts: [] };

componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
this.setState({ posts: res.data.slice(0, 10) });
});
}

render() {
const { posts } = this.state;

const postsList = posts.length ? (
posts.map(post => {
return (
<div className="card" key={post.id}>
<div className="card-body">
<Link to={"/view/" + post.id}>
<h5 className="card-title">{post.title}</h5>
</Link>
<p className="card-text">{post.body}</p>
</div>
</div>
);
})
) : (
<div className="text-danger text-center">No Posts yet...</div>
);

return <div>{postsList}</div>;
}
}

export default About;

这是我的博客详细信息组件:

import React from "react";
import { withRouter } from "react-router-dom";
import axios from "axios";

class PostDetail extends React.Component {
state = { post: null };

componentDidMount() {
let id = this.props.match.params.post_id;

axios.get("https://jsonplaceholder.typicode.com/posts/" + id).then(res => {
this.setState({ post: res.data });
});
}

render() {
const post = this.state.post ? (
<div className="card border-primary">
<div className="card-header">{this.state.post.title}</div>
<div className="card-body text-primary">
<p className="card-text">{this.state.post.body}</p>
</div>
</div>
) : (
<div className="text-center text-danger">Loading Post...</div>
);

return <div>{post}</div>;
}
}

export default withRouter(PostDetail);

最佳答案

您必须使用 window.pageYOffset 在点击帖子时将滚动位置存储在 state

this.setState({
scrollPosition: window.pageYOffset
});

一旦你点击后退按钮,你必须在 componentDidMount 方法中设置窗口位置。

window.scrollTo(0, this.state.scrollPosition);

默认情况下,您可以将scrollPosition的值设置为0

已更新

这里我使用了 sessionStorage 来保持滚动位置用于演示目的。您还可以使用上下文 API 或 redux 存储来管理它。

这是为您准备的工作演示。 https://stackblitz.com/edit/react-fystht

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";

class Posts extends React.Component {
state = { posts: [] };

componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
this.setState({ posts: res.data.slice(0, 20) }, () => {
this.handleScrollPosition();
});
});
}

// handle scroll position after content load
handleScrollPosition = () => {
const scrollPosition = sessionStorage.getItem("scrollPosition");
if (scrollPosition) {
window.scrollTo(0, parseInt(scrollPosition));
sessionStorage.removeItem("scrollPosition");
}
};

// store position in sessionStorage
handleClick = e => {
sessionStorage.setItem("scrollPosition", window.pageYOffset);
};

render() {
const { posts } = this.state;

const postsList = posts.length ? (
posts.map(post => {
return (
<div className="card" key={post.id}>
<div className="card-body">
<Link to={"/view/" + post.id} onClick={this.handleClick}>
<h5 className="card-title">{post.title}</h5>
</Link>
<p className="card-text">{post.body}</p>
</div>
</div>
);
})
) : (
<div className="text-danger text-center">No Posts yet...</div>
);

return <div>{postsList}</div>;
}
}

export default Posts;

希望对您有所帮助!

关于javascript - 在 react 中保持状态和滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59100931/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com