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;
}