说明 / 示例
# 一、前端系统逻辑
# 1.页面逻辑
## 1.1 单页机制
high/public/index.html
## 1.2 build
webpack config
## 1.3 mock
mock服务
demo.js 参考mock
启动：
run-mock-server.js
## 1.4 package.json
调用的 autoprefixer
```
"devDependencies": {
"add-asset-html-webpack-plugin": "^3.1.3",
"autoprefixer": "^7.0.1"
```
# 2.src
## 2.1 app
```
+--componet
--api.js
--connect.js 通过Reacts上下文创建Provider
--home.js 开发环境访问主页
--index.js index.html绑定的root js
--indexRouter.js 首页模块路由 跳转控制js
+--model
--action.js
--container.js
--reducer.js
+--index.js
```
## 2.2 common
### 2.21 at
```
+++--common
++--at
++--react-at
++--react-editor
++--commonTable
++--editableTable
++--exportCommonModal excel到处相关
++--importCommonModal 上传导入
++--input
--filter 筛选（shai xuan）
++--lang
--editor.js
--index.js
--label.js
--table.js
++--layout 布局
--IRLayout.js 左右布局
--RLayout.js 右布局
--siderBar.js 边
++--paginationTable
--
++--rule
--index.js
--ruleSelect.js
--ruleSelectForm.js
--ruleSelectFrame.js
++--scrollTable
++--select
++--treeSelect
```
# 二、组件二开
## 2.1 单据下拉维度
增加单据类型判断.
```
getData (type, typeId, access, range, isParentId, cb) {
if (!type && !typeId) return;
let url = '';
let {showRoot, isSync} = this.props;
if (type) {
switch (access) {
case 'common': url = GET_DIMS_BY_CODE_URL; break;
case 'data': url = GET_DIMS_ACESS_BY_CODE_URL; break;
case 'manage': url = GET_DIMS_MANAGE_BY_CODE_URL; break;
default: url = GET_DIMS_BY_CODE_URL; break;
}
request.post(url, {dimensionTypeCode: type, dimObjectId: typeId, isShowRootNode: showRoot, isSynchronize: isSync, rangeList: isParentId ? null : range}, (res)=>{
if (res.data) {
cb(res.data);
}
});
}
```
## 2.2 Constructor作用
React 中constructor 作用
react.js
阅读约 1 分钟
react 构造函数只有两个目的
初始化this.state
函数方法绑定到实例。
constructor(props) {
super(props);
this.state = { counter: 0 }; //初始化state
this.handleClick = this.handleClick.bind(this); // 事件绑定
}
初始化state
可以通过属性的方法初始化，Babel将会在后台自动加上constructor
class Foo extends Component {
state = { loading: true };
}
## 2.3 组件传值
https://www.cnblogs.com/wentutu/p/10930399.html