使用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>
);
};
}
页面详情增加相关新闻
代码实现