React realisiert die Detailseite zur Erstellung von Nachrichtenwebsites

Effektdemo

 

Kerncode:

src / index.js

importiere React, {Component} von 'react' ; 
ReactDom aus 'react-dom' importieren ; 
{Layout} aus 'antd' importieren ; 
importieren 'antd / dist / antd.css' ; 
import './style.css' ; 
AppHeader aus './components/AppHeader/' importieren ; 
{BrowserRouter, Route, Switch} aus 'react-router-dom' importieren ; 
Detail aus './containers/Detail/' importieren ; 
PageList aus './containers/List/' importieren ; 

const {Kopfzeile, Fußzeile, Inhalt} = Layout;

        (
             <BrowserRouter> 
                <Layout style = {{minWidth: 1200, height: '100%'}}> 
                    <Header className = "header"> <AppHeader /> </ Header> 
                    <Content className = "content">                        
                        <Switch> 
                            <Route path = "/ detail /: id" component = {Detail} /> 
                            { / * /: id? Route 代表 参数 可 传 传* / }
                             <Route path = "/: id?" Component = {PageList} / > 
                        </ Switch>                        
                    </ Content>
                    <Footer className = "footer"> @ copyright cyy 2020 </ Footer>
                </ Layout> 
            </ BrowserSouter> 
    } 
} 
ReactDom.render ( <App />, document.getElementById ('root'));
         )

 

container / List / index.js

importiere React, {Component} von 'react' ; 
{Liste, Typografie} aus 'antd' importieren ; 
Axios aus 'Axios' importieren ; 
{Link} aus 'react-router-dom' importieren ; 
 
Klasse PageList erweitert Component { 
    Konstruktor (Requisiten) { 
        Super (Requisiten); 
        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. Daten 
            }) 
        }) 
    }

    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>                 )}
                 />
        ) 
    } 
}

Standard- Seitenliste 
exportieren ;

 

container / Detail / index.js

importiere React, {Component} von 'react' ; 
{Card} aus 'antd' importieren ; 
Axios aus 'Axios' importieren ; 
import './style.css' ; 

Klasse Detail erweitert Komponente { 
    Konstruktor (Requisiten) { 
        Super (Requisiten); 
        this .state = { 
            title: '' , 
            content: '' 
        } 
    } 

    componentDidMount () { 
        const id = this .props.match.params.id; 
        axios.get ( "http://www.dell-lee.com/react/api/detail.json?id=")=> { 
            const data = res.data.data;
            dieser .setState (Daten); 
        }) 
    } 
    render () { 
        console.log ( diese .props.match.params.id);
        return (
             <Card title = { this .state.title}> 
            <div class = "detail" gefährlichSetInnerHTML = {{__ html: this .state.content}}> </ div> 
            </ Card>         ) 
    } 
} 
export default detail;

 

container / Detail / style.css

.detail img {
     float : left; 
    Rand - rechts: 10px; 
}}