## 创建详情页
1. 我们把修改页完成后，详情页就简单多了，只是一个查看功能。没有数据提交、数据校验等功能
2. 我们复制修改页，做如下修改，将组件都变更为span类型
~~~
import React, { PureComponent } from 'react';
import { Form, Card } from 'antd';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
import { detail } from '../../../services/demo';
const FormItem = Form.Item;
@Form.create()
class DemoEdit extends PureComponent {
state = {
data: {},
};
componentWillMount() {
const {
match: {
params: { id },
},
} = this.props;
detail({ id }).then(resp => {
if (resp.success) {
this.setState({ data: resp.data });
}
});
}
render() {
const { data } = this.state;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
return (
<Panel title="查看" back="/platform/demo">
<Form hideRequiredMark style={{ marginTop: 8 }}>
<Card title="基本信息" className={styles.card} bordered={false}>
<FormItem {...formItemLayout} label="标题">
<span>{data.title}</span>
</FormItem>
<FormItem {...formItemLayout} label="日期">
<span>{data.date}</span>
</FormItem>
<FormItem {...formItemLayout} label="内容">
<span>{data.content}</span>
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoEdit;
~~~
3. 到路由配置文件`router.config.js`增加路径
4. 打开系统点击查看发现数据加载成功
5. 附上完整的路由配置
~~~
{
path: '/platform',
routes: [
{
path: '/platform/demo',
routes: [
{ path: '/platform/demo', redirect: '/platform/demo/list' },
{ path: '/platform/demo/list', component: './Platform/Demo/Demo' },
{ path: '/platform/demo/add', component: './Platform/Demo/DemoAdd' },
{ path: '/platform/demo/edit/:id', component: './Platform/Demo/DemoEdit' },
{ path: '/platform/demo/view/:id', component: './Platform/Demo/DemoView' },
],
},
],
},
~~~
## 结束语
经过一整个章节的讲解，相信大家能对React开发有个初步的认识，下面我们来学习下进阶的知识并且对我们做的CRUD模块再次优化，符合正式的开发需求。