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/:id" 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'));

 

containers/list/index.js

import react,{component} from 'react';
import { list, typography } from 'antd';
import axios from 'axios';
import {link} from 'react-router-dom';
 
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>
                        <link to={`/detail/${item.id}`}>
                            <typography.text mark>[item]</typography.text> {item.title}
                        </link>
                    </list.item>
                )}
                />
        )
    }
}

export default pagelist;

 

containers/detail/index.js

import react,{component} from 'react';
import { card } from 'antd';
import axios from 'axios';
import './style.css';

class detail extends component{
    constructor(props){
        super(props);
        this.state={
            title:'',
            content:''
        }
    }

    componentdidmount(){
        const id=this.props.match.params.id;
        axios.get("http://www.dell-lee.com/react/api/detail.json?id="+id)
        .then(res=>{
            const data=res.data.data;
            this.setstate(data);
        })
    }
    render(){
        console.log(this.props.match.params.id);
        return(
            <card title={this.state.title}>
            <div class="detail" dangerouslysetinnerhtml={{__html:this.state.content}}></div>
            </card>
        )
    }
}

export default detail;

 

containers/detail/style.css

.detail img{
    float:left;
    margin-right:10px;
}