项目实战之首页模块
实现轮播图
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/