启动项目注意事项：
- 启动Apifox应用——项目的mock接口
项目目录结构
1 | src |
项目笔记
注：先引入less，免得后面再来配置的时候，由于依赖包之间的版本之间存在冲突问题。
安装和初始化
1 | yarn create react-app ad_manage_react |
1 | cd antd-demo |
安装并引入 antd
1 | yarn add antd |
安装 craco 并修改 package.json 里的 scripts 属性
1 | yarn add @craco/craco |
1 | /* package.json */ |
在项目根目录创建一个 craco.config.js 用于修改默认配置
自定义主题
首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。
1 | /* src/App.js */ |
1 | /* src/App.less */ |
然后安装 craco-less 并修改 craco.config.js 文件如下。
1 | yarn add craco-less |
1 | const CracoLessPlugin = require('craco-less'); |
添加react-router-dom@6
1 | yarn add react-router-dom@6 |
添加react-redux
1 | yarn add react-redux |
添加Redux Toolkit
1 | yarn add @reduxjs/toolkit |
添加redux-persist
1 | yarn add redux-persist |
异步获取数据
useEffect
可变的变量不放在useEffect中
错误用法：
这样写会报错
1 | let sourceList = []; |
改为：
注：useEffect后面的依赖项，要加[]，不加，会一直执行这个方法。
1 | const [sourceList, setSourceList] = useState([]); |
使用数据图表
ECharts for React
注：要安装echarts，不然会报以下错误：
1 | Module not found: Error: Can't resolve 'echarts' in 'H:\Gitee\ad_manage_react\node_modules\echarts-for-react\esm' |
1 | yarn add echarts |
1 | yarn add echarts-for-react |
1 | import React from 'react'; |
工具栏组件
toolbox
echart图表生成表格
toolbox—features—dataView
将echarts的数据视图装换为table表格,并且导出excel
将ECHARTS的数据视图展示为TABLE并且导出EXCEL
一、使用工具栏的方法
工具栏生成表格的设置，在toolbox->feature->dataView中设置
1 | const options = { |
1 | const onChartReadyCallback = (echarts) =>{ |
二、自定义表格的方法
需要设置toolbox属性
缺点：表头的固定不好设置
设置dataView为不可见
1 | ..... |
三、使用antd生成表格
注：
- 主要是处理
columns和dataSource数据 - 不需要设置toolbox属性
legend
图例组件展现了不同系列的标记(symbol)，颜色和名字
1 | legend: { |
grid
设置这个位置，可以让legend显示在图表上方位置，而不是覆盖在图表上
直角坐标系内绘图网格
1 | grid: { |
折叠图叠加
series
1 | { |
echart添加横向滚动条
dataZoom
1 | dataZoom: [ |
左侧导航栏-新版本的使用
1 | const items = [ |
加上页面跳转
1 | { |
项目中-加上页面跳转的做法
1 | import { Link } from 'react-router-dom'; |
Menu新版本—左侧导航栏完整代码
左侧导航menus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164import {
AppstoreOutlined,
ToolOutlined,
MacCommandOutlined,
FolderOpenOutlined,
DashboardOutlined,
PieChartOutlined,
SettingOutlined }
from '@ant-design/icons';
import { Link } from 'react-router-dom';
const leftMenus = [
{
// label: '全部产品',
label: ( <Link to="/product">全部产品</Link>),
key:'/product',
icon: <AppstoreOutlined />
},
{
// label: '素材管理',
label: ( <Link to="/source">素材管理</Link>),
key:'/source',
icon: <FolderOpenOutlined />
},
{
label: '公共模块',
key:'/ad',
icon: <MacCommandOutlined />,
children: [
{
// label: '权限管理',
label: ( <Link to="/ad/account">权限管理</Link>),
key:'/ad/account',
icon: ''
},
{
// label: '用户管理',
label: ( <Link to="/ad/user">用户管理</Link>),
key:'/ad/user',
icon: ''
},
{
// label: '账户管理',
label: ( <Link to="/ad/agent">账户管理</Link>),
key:'/ad/agent',
icon: ''
},
{
// label: '项目管理',
label: ( <Link to="/ad/group">项目管理</Link>),
key:'/ad/group',
icon: ''
},
{
// label: '渠道管理',
label: ( <Link to="/ad/channel">渠道管理</Link>),
key:'/ad/channel',
icon: ''
},
{
// label: '设备管理',
label: ( <Link to="/ad/device">设备管理</Link>),
key:'/ad/device',
icon: ''
},
{
// label: '推广参数设置',
label: ( <Link to="/ad/config">推广参数设置</Link>),
key:'/ad/config',
icon: ''
},
]
},
{
key:'/dashboard',
label: '仪表盘',
icon: <DashboardOutlined />,
children: [
{
// label: '总览',
label: ( <Link to="/dashboard/overview">总览</Link>),
key:'/dashboard/overview',
icon: ''
},
{
// label: '实时',
label: ( <Link to="/dashboard/realtime">实时</Link>),
key:'/dashboard/realtime',
icon: ''
},
{
// label: '渠道效果对比',
label: ( <Link to="/dashboard/channeleffect">渠道效果对比</Link>),
key:'/dashboard/channeleffect',
icon: ''
},
]
},
{
key:'/collect',
label: '报表',
icon: <PieChartOutlined />,
children: [
{
// label: '分包推广详情',
label: ( <Link to="/collect/subpackage">分包推广详情</Link>),
key:'/collect/subpackage',
icon: ''
},
{
// label: 'SEM活动详情',
label: ( <Link to="/collect/sem">SEM活动详情</Link>),
key:'/collect/sem',
icon: ''
},
{
// label: '激活延迟分析',
label: ( <Link to="/collect/effectevaluate">激活延迟分析</Link>),
key:'/collect/effectevaluate',
icon: ''
},
]
},
{
key:'/tool',
label: '工具',
icon: <ToolOutlined />,
children: [
{
// label: '归因查询',
label: ( <Link to="/tool/attribute">归因查询</Link>),
key:'/tool/attribute',
icon: ''
},
{
// label: '日志流',
label: ( <Link to="/tool/logtool">日志流</Link>),
key:'/tool/logtool',
icon: ''
},
]
},
{
key:'/manage',
label: '配置',
icon: <SettingOutlined />,
children: [
{
// label: '推广回调管理',
label: ( <Link to="/manage/datacb">推广回调管理</Link>),
key:'/manage/datacb',
icon: ''
},
{
// label: '埋点管理',
label: ( <Link to="/manage/customevent">埋点管理</Link>),
key:'/manage/customevent',
icon: ''
},
]
},
]
export default leftMenus;左侧导航-组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92import React, {useState, useEffect} from 'react'
import { Layout, Menu } from 'antd';
import { useLocation } from 'react-router-dom';
import leftMenus from '../app/leftMenus';
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
}
from '@ant-design/icons';
const { Sider } = Layout;
// const { SubMenu } = Menu;
// 左侧导航栏
export default function LeftNav(props) {
const location = useLocation();
const pathname = location.pathname;
const [selectedKeys, setSelectedKeys] = useState([]);
const [openKeys, setOpenKeys] = useState([]);
useEffect(() => {
// 更新选中状态
const rank = pathname.split('/');
switch(rank.length) {
case 2 :
setSelectedKeys([pathname])
break;
case 3:
setSelectedKeys([pathname])
setOpenKeys([rank.slice(0, 2).join('/')])
break;
case 4:
setSelectedKeys([pathname])
setOpenKeys([rank.slice(0, 2).join('/'), rank.slice(0, 3).join('/')])
break;
default:
setSelectedKeys([]);
setOpenKeys([]);
}
},[pathname]);
// 展开/收起SubMenu触发
const onOpenChange = keys => {
setOpenKeys(keys)
};
// 点击MenuItem时触发
const onClick = e => {
setSelectedKeys([e.key])
}
return (
<Sider
trigger={null}
collapsible
collapsed={props.isCollapsed}
collapsedWidth="60"
className='left-sider'
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
}}
>
<div className="logo">
<span
className='toggleFold'
onClick={props.onToggle}
>
{ props.isCollapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
</span>
</div>
<Menu
items={leftMenus}
theme="dark"
mode="inline"
openKeys={openKeys}
selectedKeys={selectedKeys}
onOpenChange={onOpenChange}
onClick={onClick}
defaultSelectedKeys={[selectedKeys]}
/>
</Sider>
)
}
antd-日期选择-最近几天
1 | import { DatePicker } from 'antd'; |
antd表格
渲染表格的数据—–数组数据，每一项要有唯一的key值
key值相关报错：Warning: Each child in a list should have a unique "key" prop.
解决方法：
在数据中添加key属性
1
2
3
4
5
6
7
8
9
10[
{
"key": 3215,
"id": 3215,
"group_id": 2,
"group_name": "测试项目",
"create_by": "10000"
}
....
]使用别的唯一性的属性：
rowKey = { record => record.id}1
2
3
4
5
6<Table
columns={columns}
dataSource={accountList}
rowKey = { record => record.id}
bordered>
</Table>
报错信息处理
[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve
react报错: Unable to preventDefault inside passive event li ……
React js -[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event
react Added non-passive event listener to a scroll-blocking ‘mousewheel’ event
1 | yarn add default-passive-events 或 cnpm i default-passive-events -S |
加上以上配置之后，
报错：react-dom.development.js:6848 Unable to preventDefault inside passive event listener invocation.
React中使用antd的select报错Unable to preventDefault inside passive event listener invocation.
最后解决：
先停掉运行中的项目，找到node_modules\react-dom\cjs\react-dom.development.js中6202行的代码将event.preventDefault();注释掉，再重新运行项目，无需任何其他设置
1 |
|
React中轮播报错pan-y不起作用Unable to preventDefault inside passive event listener invocation