## 創建詳情頁
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模塊再次優化，符合正式的開發需求。