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

Posted 2021-02-28 chenyingying0

效果演示

 

以下是核心代码

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;