当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React实现新闻网站--使用动态路由获取不同列表内容

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

2020年04月18日  | 移动技术网IT编程  | 我要评论

效果演示

 

以下是核心代码

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;

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网