最近在做一個(gè)官網(wǎng)的首頁(yè)，有個(gè)功能是從列表頁(yè)跳到詳情頁(yè)，詳情頁(yè)底部，能點(diǎn)擊上一篇文章雅镊，下一篇文章。
1.引入相關(guān)資源
import React from 'react';
import styles from './index.css';
import { connect } from 'dva';
import { Button } from 'antd';
2.頁(yè)面要應(yīng)用models層的數(shù)據(jù)要用connect
@connect(({ news }) => ({
...news, //是models命名空間名字
}))
3.從后臺(tái)接收數(shù)據(jù)刃滓，進(jìn)行數(shù)據(jù)渲染
class Details extends React.Component {
loadDetails(Id) {
const parentId = this.props.history.location.query;
if (!Id) {
Id = parentId.id;
}
this.props.dispatch({
type: 'news/getNewsdetail',
payload: {
id: Id,
},
});
}
componentWillMount() {
this.loadDetails();
}
render() {
const news = this.props.news || { PreNews: [{ Title: '' }], NextNews: [{ Title: '' }] };
return (
// 資訊詳情頁(yè)
<div className={styles.Details}>
<div className={styles.banner}>
<img src={require('@/assets/images/banner2.png')} alt="" />
</div>
<div className={styles.content}>
<div className={styles.Box}>
<div className={styles.Title}>{news.title}</div>
<span className={styles.Time}>{news.pubTime}</span>
<div className={styles.TxtBox}>
<div className={styles.TxtBox_Top}>
<div dangerouslySetInnerHTML={{ __html: news.context }} />
</div>
</div>
{/* 上下篇文章切換部分 */}
<div className={styles.post_nav_box}>
<div className={styles.post_nav_prev} onClick={e => {}}>
<Button
onClick={e => {
this.lookPrevious(news.PreNews.id);
}}
>
上一篇
</Button>
<span>{news.PreNews.Title}</span>
</div>
<div className={styles.post_nav_next}>
<Button
onClick={e => {
this.lookLast(news.NextNews.id);
}}
>
下一篇
</Button>
<span>{news.NextNews.Title}</span>
</div>
</div>
</div>
</div>
</div>
);
}
// 上一篇
lookPrevious(id) {
if (id) {
this.loadDetails(id);
} else {
alert('沒(méi)有上一篇了仁烹！');
}
}
// 下一篇
lookLast(id) {
if (id) {
this.loadDetails(id);
} else {
alert('沒(méi)有下一篇了');
}
}
}
export default Details;
