• 页面效果代码实现 完整代码import React from 'react';import {Card} from 'antd';import {Router, Route, Link, browserHistory} from 'react-router'export default class PCNewsBlock extends React.Component {...

    详情页面

         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是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来...而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动
  • React-微信网页开发总结 2019-04-17 20:55:56
    前段时间用React写了几个微信公众号的网页,遇到的主要阻力就是微信的网页授权问题和JS-SDK使用问题。 1. 网页授权 根据微信官方网页授权介绍,只有在需要获取用户信息时,才需要用到微信网页授权机制。关于如何进行...
  • 基于React的个人网站前端代码
  • 该项目涉及知识点: crate-react-app,通过官方提供的脚手架,快搭建一个项目框架 react redux,数据状态的管理 ... react-router,使用路由 axios antd, 下载模块 使用npm install x...
  • 转载请注明出处:王亟亟的大牛之路继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套, 开始今天的内容前老规矩,先安利:...
  • 最近为了熟悉Bone框架,就准备用react写一个简单的格斗游戏练练手。目前2天时间完成了游戏的前期准备工作。可以控制人物前进,后退,攻击,跳跃,发动技能等操作,但是总觉得操作起来有一点不流畅。接下来还准备...
  • 介绍这个工具前不得不先介绍一下积木系统。 积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统,详细介绍见 PPT ...一个页面使用多个组件拼装后,实时预览、快速发布上线 此前在阿里实习的时...
  • React 在Html页面中使用React 2019-04-27 00:33:17
    1). React地址 ReactJS官网地址Github地址 2). 搭建环境 安装Node.js官网 全局安装bower npm install -g bower 图1.png bower安装react bower install react 图2.png bowe...
  • react写气泡和悬浮组件 2020-01-13 11:17:13
    使用react写悬浮气泡和组件的hover事件 1、效果 气泡随着按钮来变化展示,根据继承react.component,使用OnMouseOver和OnMouseOut事件方法来实现hover的效果 2、气泡组件 overlap.js: import React from ...
  • 1.安装环境 下载vscode nodejs,装reactor框架包,在node安装目录下运行命令 npm install create-react-app,具体可百度下 2.新建文件夹叫simple_add,执行指令如下:npx create-react-app my_app,这个需要等待一段...
  • 原文地址:How to: React Native Web app. A Happy Struggle. 原文作者:Lucas Mórawski 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:weibinzhu 校对者:Moonliujk, nanjingboy 一个...
  • 应开发需求,需要在react框架基础上实现网页的打印,普通的js打印都是通过获取DOM元素来确定需要打印的区域,然而React一类的框架采用虚拟DOM,无法获取真实DOM元素,想到一个办法就是前端实现一个有当前页面样式的...
  • React 基础-书写一个页面 2019-01-12 09:18:12
    由于 RN 环境过于麻烦,所以这里先尝试 React,有不对的还望不吝赐教 React 安装请查看官网 渲染 JSX React 的模板语法是 JSX,看起来很像是 JS+HTML 的混血儿。具体的语法这里就不再赘述,想了解的话,...
  • 1.页面效果 2.项目结构 具体代码 root.js pc_index.js pc_header.js 移动端代码调整 页脚页面 1....页面效果 代码实现 移动端效果;代码实现 import React from 'react';import {Row, Col} from...
  • 根据自己最近学习react 视频,下面谈谈如何去创建一个react项目 准备工作: ES6语法、html5、css3、JSX语法 node.js 这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。 打开react官网,可以是...
  • react搭配h5原生video标签手写网页播放器。本次开发,主要是node做项目的依赖管理,同时使用webpack进行打包。请确保运行项目前已安装这两样利器。项目结构深坑整个项目过程还算流畅,唯独在处理全屏状态下监听esc...
  • react 网页截图 2019-05-24 15:18:59
    确实如官方介绍那么简单 需要注意的是,在antd中Modal组件直接获取id是拿不到DOM的,需要className,代码示例如下 ...import React, { Component } from "react"; import html2canvas from "html2canv...
  • react实现网页播放m3u8 2020-05-11 14:53:36
    m3u8是直播常见的格式,如何在网页上播放它呢? 一、如果是safari,则非常简单,因为safari本身就可以支持这种格式,直接video标签即可,唯一注意的是type一定要指定成application/x-mpegURL <video height=...
1 2 3 4 5 ... 20
收藏数 15,268
精华内容 6,107