最近在做一个官网的首页，有个功能是从列表页跳到详情页，详情页底部，能点击上一篇文章，下一篇文章。

1.引入相关资源

import React from 'react';
import styles from './index.css';
import { connect } from 'dva';
import { Button } from 'antd';

2.页面要应用models层的数据要用connect

@connect(({ news }) => ({
  ...news, //是models命名空间名字
}))

3.从后台接收数据，进行数据渲染

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 (
      // 资讯详情页
      <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('没有上一篇了！');
    }
  }
  // 下一篇
  lookLast(id) {
    if (id) {
      this.loadDetails(id);
    } else {
      alert('没有下一篇了');
    }
  }
}
export default Details;