react实战项目-详情页（文章页）获取上一篇文章下一篇文章

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

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 (
      // 资讯详情页
      

        

          
        
        

          

            
{news.title}
            {news.pubTime}

            

              

                

              
            
          {/* 上下篇文章切换部分 */}
            

              
 {}}>
                 {
                    this.lookPrevious(news.PreNews.id);
                  }}
                >
                  上一篇
                
                {news.PreNews.Title}
              

              

                 {
                    this.lookLast(news.NextNews.id);
                  }}
                >
                  下一篇
                
                {news.NextNews.Title}
              
            
          
        
      
    );
  }
  // 上一篇
  lookPrevious(id) {
    if (id) {
      this.loadDetails(id);
    } else {
      alert('没有上一篇了！');
    }
  }
  // 下一篇
  lookLast(id) {
    if (id) {
      this.loadDetails(id);
    } else {
      alert('没有下一篇了');
    }
  }
}
export default Details;