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

• Z时代
• 2024-01-10
• 分类：综合

详情页面

     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>

        );

    };

}

页面详情增加相关新闻

代码实现

以上是 使用React做个简单的页面-03 的全部内容， 来源链接： utcz.com/z/384402.html