欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React实现新闻网站--使用动态路由获取不同列表内容

程序员文章站 2022-07-10 21:26:48
效果演示 以下是核心代码 src/index.js import React,{Component} from 'react'; import ReactDom from 'react-dom'; import { Layout } from 'antd'; import 'antd/dist/an ......

效果演示

React实现新闻网站--使用动态路由获取不同列表内容

 

以下是核心代码

src/index.js

import react,{component} from 'react';
import reactdom from 'react-dom';
import { layout } from 'antd';
import 'antd/dist/antd.css';
import './style.css';
import appheader from './components/appheader/';
import {browserrouter,route,switch} from 'react-router-dom';
import detail from './containers/detail/';
import pagelist from './containers/list/';

const { header, footer, content } = layout;

class app extends component{
    render(){
        return(
            <browserrouter>
                <layout style={{minwidth:1200,height:'100%'}}>
                    <header classname="header"><appheader/></header>
                    <content classname="content">                       
                        <switch>
                            <route path="/detail" component={detail}/>
                            {/* /:id?代表参数可传可不传 */}
                            <route path="/:id?" component={pagelist}/>
                        </switch>                       
                    </content>
                    <footer classname="footer">@copyright cyy 2020</footer>
                </layout>
            </browserrouter>
        )
    }
}

reactdom.render(<app/>,document.getelementbyid('root'));

 

components/appheader/index.js

import react,{component,fragment} from 'react';
import logo from './logo.png';
import './style.css';
import { menu } from 'antd';
import axios from 'axios';
import { icon } from '@ant-design/compatible';
import {link} from 'react-router-dom';  

class appheader extends component{
    constructor(props){
        super(props);
        this.state={
            list:[]
        }
    }

    componentdidmount(){
        axios.get("http://www.dell-lee.com/react/api/header.json")
        .then(res=>{
            console.log(res.data.data);
            this.setstate({
                list:res.data.data
            })
        })
    }

    createmenuitem(){
        return this.state.list.map(item=>{
            return(              
                <menu.item key={item.id}>
                    <link to={`/${item.id}`}>
                        <icon type={item.icon} />
                        {item.title}
                    </link>
                </menu.item>              
            )
        })
    }

    render(){
        return(
            <fragment>
                <img src={logo} classname="logo" />
                <menu mode="horizontal" classname="menu">{this.createmenuitem()}</menu>
            </fragment>
        )
    }
}

export default appheader;

 

containers/list/index.js

import react,{component} from 'react';
import { list, typography } from 'antd';
import axios from 'axios';
 
class pagelist extends component{
    constructor(props){
        super(props);
        this.state={
            data:[]
        }
    }

    componentwillreceiveprops(nextprops){
        const id=nextprops.match.params.id;
        axios.get("http://www.dell-lee.com/react/api/list.json?id="+id)
        .then(res=>{
            this.setstate({
                data:res.data.data
            })
        })       
    }

    componentdidmount(){
        let url="http://www.dell-lee.com/react/api/list.json";
        const id=this.props.match.params.id;
        if(id){
            url=url+"?id="+id;
        }
        axios.get("http://www.dell-lee.com/react/api/list.json?id="+id)
        .then(res=>{
            this.setstate({
                data:res.data.data
            })
        })
    }

    render(){
        return(
            <list
                style={{background:'#fff'}}
                bordered
                datasource={this.state.data}
                renderitem={item => (
                    <list.item>
                    <typography.text mark>[item]</typography.text> {item.title}
                    </list.item>
                )}
                />
        )
    }
}

export default pagelist;