使用React做个简单的页面-03

详情页面

     1.页面效果

代码实现

  

完整代码

import React from 'react';

import { Card} from 'antd';

import { Router, Route, Link, browserHistory} from 'react-router'

export default class PCNewsBlock extends React. Component {

     constructor() {

         super();

         this. state = {

             news: ''

        };

    }

     componentWillMount() {

         var myFetchOptions = {

             method: 'GET'

        };

         fetch( "http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this. props. type + "&count=" + this. props. count, myFetchOptions). then( response => response. json()). then( json => this. setState({ news: json}));

    };

     render() {

         const { news} = this. state;

         const newsList = news. length

            ? news. map(( newsItem, index) => (

                 < li key= { index } >

                     < Link to= { `details/ ${ newsItem. uniquekey } ` } target= "_blank" >

                         { newsItem. title }

                     </ Link >

                 </ li >

            ))

            : '没有加载到任何新闻';

         return (

             < div class= "topNewsList" >

                 < Card >

                     < ul >

                         { newsList }

                     </ ul >

                 </ Card >

             </ div >

        );

    };

}

页面详情增加相关新闻

  

代码实现