近期闲暇时间近期闲暇时间，自己动手做了一个留言板模板，运用mock.js+react.js 来实现。这是一个很简单的demo，其中运用到了组件与组件之间传值、提交留言后滚动到页面最底部、easy-mock的使用
1. 使用create-react-app创建项目并初始化
1
2
3
4
5
| create-react-app message_board
cd message_board
npm start
|
注意创建的项目文件名只能使用小写字母
2.在原有项目结构中新增文件夹如下
assets (用于放置资源文件 如.img)
common(常量)
components (自定义组件库)
layout (主要页面布局)
3. 创建主要模块
在layout文件夹下创建一个页面 Home
并在components文件夹下创建两个组件模块 分别为
MessageForm (留言板表单模块)
MessageList (留言板显示模块)
现文件结构如下
4.接下来搭建每个组件的结构，将两个组件合并起来在Home页面中正常显示，主要代码如下
1
2
3
4
5
6
7
8
9
10
11
12
| //留言板表单模块
// /components/MessageForm/index.js
import React from 'react'
class MessageForm extends React.Component {
render() {
return (
<div> this is MessageForm</div>
)
}
}
export default MessageForm
|
上面是MessageForm组件的代码，剩下两个MessageList MessageAlert写法如上，
接着在/layout/Home中引入三个组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import React from 'react'
import MessageForm from '../../components/MessageForm'
import MessageList from '../../components/MessageList'
class Home extends React.Component{
render(){
return(
<div>
<MessageForm />
<MessageList />
</div>
)
}
}
export default Home
|
页面展示如下
这说明两个组件可以在页面上正常显示，接着我们将分别编写三个组件 实现各自功能
本demo采用蚂蚁金服框架antd来开发，引入方法详见https://ant.design/docs/react/use-with-create-react-app-cn
使用 babel-plugin-import 按需加载组件代码和样式的 babel 插件
1
2
3
| antd npm install
npm install babel-plugin-import
npm run eject
|
修改package.json中的 “babel”: { “presets”: [ “react-app” ], “plugins”: [ [ “import”, { “libraryName”: “antd”, “style”: true } ] ] },
配置less less-loader css-modules 详见 https://www.jianshu.com/p/51ff1c8be301
之后便可以按需载入所需组件，其中包括标题的input框、留言内容的textarea、提交按钮及重置按钮,使用方法可以详见antd官网，主要代码内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div className="msgFrom">
<Divider orientation="left">发表留言</Divider>
<Form layout="inline" onSubmit={this.handleSubmit} >
<FormItem >
{getFieldDecorator('title', {
rules: [{ required: true, message: '请输入标题！' }],
})(
<Input size="large" placeholder="请输入标题" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('massage', {
rules: [{ required: true, message: '请输入留言内容！' }],
})(
<TextArea rows={5} placeholder="请输入留言内容" />
)}
</FormItem>
<FormItem style={{textAlign:'right'}}>
<Button type="primary" className="submit" htmlType="submit">发表</Button>
<Button type="primary" htmlType="reset" onClick={this.resetClick.bind(this)}> 重置</Button>
</FormItem>
</Form>
</div>
|
页面显示效果为
6.MessageList 留言板列表展示模块
留言板展示模块比较简单，使用列表List组件来显示，主要代码如下：
1
2
3
4
5
6
7
8
9
10
| <div style={{padding:'30px'}}>
<List itemLayout="horizontal" dataSource={data} renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={require('../../assets/head.png')} />}
title={item.title}
description={item.massage} />
</List.Item>
)} />
</div>
|
页面显示效果如下：
7.其他效果的实现
本demo的完整实现还不仅如此，其中还涉及到了组件与组件之间的传值、提交留言后滚动到页面最底部、easy-mock的使用，这些效果实现方法将在另外文章中详细说明
