React实现新闻网站--使用动态路由获取不同列表内容
程序员文章站
2022-07-10 21:26:48
效果演示 以下是核心代码 src/index.js import React,{Component} from 'react'; import ReactDom from 'react-dom'; import { Layout } from 'antd'; import 'antd/dist/an ......
效果演示
以下是核心代码
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;
上一篇: 京东提前批面经
下一篇: 荐 Spring AOP 的设计与实现