如何用react写一个详情页
使用React创建详情页
React非常适合构建动态和交互式的详情页。以下是一个基本实现方法：
创建组件结构
import React from 'react';
function DetailPage({ itemId }) {
const [itemData, setItemData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
}获取数据 使用useEffect钩子获取详情数据：
React.useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`/api/items/${itemId}`);
const data = await response.json();
setItemData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [itemId]);渲染详情内容
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!itemData) return <div>No data found</div>;
return (
<div className="detail-container">
<h1>{itemData.title}</h1>
<img src={itemData.image} alt={itemData.title} />
<p>{itemData.description}</p>
<div className="price">${itemData.price}</div>
<button onClick={handleAddToCart}>Add to Cart</button>
</div>
);添加路由配置
使用React Router设置详情页路由：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/items/:id" component={DetailPage} />
</Switch>
</Router>
);
}样式处理
使用CSS模块或styled-components添加样式：
import styles from './DetailPage.module.css';
// 在组件中使用
<div className={styles.detailContainer}>
{/* 内容 */}
</div>优化性能
实现懒加载和错误边界：
const DetailPage = React.lazy(() => import('./DetailPage'));
function App() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<DetailPage />
</Suspense>
</ErrorBoundary>
);
}添加交互功能
实现购物车功能示例：
const handleAddToCart = () => {
// 调用购物车上下文或Redux action
addToCart(itemData);
alert(`${itemData.title} added to cart!`);
};这个实现包含了详情页的基本要素：数据获取、路由配置、样式处理和交互功能。根据具体需求可以进一步扩展，如添加图片轮播、用户评论、推荐商品等功能模块。
