Reactがニュースサイト作成詳細ページを実現

効果のデモ

 

コアコード：

src / index.js

React、{Component}を 'react'からインポートします。
以下からの輸入ReactDom「-DOMを反応させます」。' 
レイアウト 'を 'antd' からインポートします。
import 'antd / dist / antd.css' ; 
import './style.css' ; './components/AppHeader/' 
からAppHeaderをインポートします。' 
BrowserRouter、Route、Switch}を ' react-router-dom ' からインポートします。'./containers/Detail/' 
から詳細をインポートします。'./containers/List/' 
からPageListをインポートします。

const {ヘッダー、フッター、コンテンツ} = レイアウト。

        （
             <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'））;

 

コンテナ/リスト/index.js

React、{Component}を 'react'からインポートします。'antd' 
から{リスト、タイポグラフィー}をインポートします。'axios' 
からaxiosをインポートします。'React-router-dom' 
から{Link}をインポートします。
 
クラスPageListは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。データ 
            }）
        }）
    }

    （）{レンダリング
        リターン（
             < リスト
                スタイル： '＃FFF' = {{背景}} 
                ボーダー
                のdataSource = { この.state.data} 
                のRenderItem = {アイテム=> （
                     <List.Item> 
                        = { `/細部に<リンク/ $ {item.id} `}> 
                            <Typography.Text mark> [ITEM] </ Typography.Text> {item.title} 
                        </ Link> 
                    </List.Item>                 ）}
                 />
        ）
    } 
}

 
エクスポートしデフォルトの PageList;

 

コンテナ/詳細/index.js

React、{Component}を 'react'からインポートします。'antd' 
から{Card}をインポートします。'axios' 
からaxiosをインポートします。
import './style.css' ; 

クラスDetailは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="=> { 
            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>         ）
    } 
} 
エクスポートデフォルトの詳細。

 

コンテナー/詳細/style.css

.detail img {
     float ：left; 
    マージン - 右：10px; 
}