我要评论效果演示
核心代码：
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;
}
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论