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

项目实战之首页模块

     实现轮播图

      1.页面效果

       

代码实现

pc_index.js页面

   

加载新闻

   页面 效果

   

代码实现

 

加载图片

   页面效果

  

代码实现

  

图片组件代码

import React from 'react';

import { Card} from 'antd';

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

export default class PCNewsImageBlock 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 styleImage = {

             display: "block",

             width: this. props. imageWidth,

             height: "90px"

        };

         const styeH3 = {

             width: this. props. imageWidth,

             whiteSpace: "nowrap",

             overflow: "hidden",

             textOverflow: "ellipsis"

        };

         const { news} = this. state;

         const newsList = news. length

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

                 < div key= { index } class= "imageblock" >

                     < Link to= { `details/