我正在尝试构建一个显示博客文章列表的组件。当用户单击帖子时,它会呈现显示帖子详细信息的组件。但是当用户点击浏览器中的后退按钮时,带有帖子列表的前一个组件会重新呈现,并且它会丢失之前的状态和滚动位置。有没有办法可以保存以前的状态和滚动位置,以便当用户点击后退按钮时,它们处于相同的位置并且帖子列表不会重新呈现并且也不会丢失滚动位置?
这是我的博客列表组件代码:
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> …Run Code Online (Sandbox Code Playgroud) 我正在尝试将tailwindcss-react-native包设置到我的 React Native 项目中。成功安装后,当我向组件添加类名时,会出现错误。我尝试卸载然后重新安装它,删除 npm 缓存和 node_modules 文件夹,但我无法弄清楚出了什么问题。我附上了错误日志以及我的项目的代码。请指出我在这里缺少什么。谢谢
我的 babel.config.js 文件:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ["tailwindcss-react-native/babel"],
};
};
Run Code Online (Sandbox Code Playgroud)
我的 tailwind.config.js 文件:
module.exports = {
content: [
"./screens/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Run Code Online (Sandbox Code Playgroud)
我的 App.js 文件:
import { TailwindProvider } from 'tailwindcss-react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createNativeStackNavigator();
export default function App() { …Run Code Online (Sandbox Code Playgroud) javascript ×2
android ×1
babeljs ×1
react-native ×1
react-router ×1
reactjs ×1
tailwind-css ×1