winney

Sketch官方用户手册

Sketch

即时设计

帮助中心

人工智能设计工具

矢量绘图也是目前进行网页，图标以及界面设计的最好方式

Sketch 并不是一个位图编辑应用

想在画布中设置一个固定的画框，你只需新建一个或多个新的画板。举个例子，设计移动应用界面时，很多设计师会为应用的每一个屏都创建一个画板，然后排列开来以便查看。

预设模板

• 空白文件
• Ant Design移动端
• Ant Design网页端
• 高级界面设计
• 登录注册页面
• 面性图标
• 基础导航设计

可导入文件类型

• Figma
• Sketch
• XD
• JSD

我的文件——包括自己创建的文件和分享给我的文件

创建团队——规范化管理团队成员及项目文件

资源广场——有非常丰富的开源设计文件，这些文件都可以引用到你的设计稿中

工具

左侧

• 多边形
• 效率插件——多维度辅助创作
• 评论——多人评审、在线实时沟通、备注信息等

右侧

• 分享——可分享或邀请他人协作，支持按角色分配不同权限，实时协作，修改随时同步（右上角）
• 导出图片——可以设置多种导出倍率及尺寸、添加图片后缀，并支持同时导出多种所需格式的图片
• 主题切换(右下角)

基础创建与编辑

1. 创建画板
2. 创建图层
3. 填充图片
4. 文本编辑
5. 快捷复制粘贴（ctrl +d)

精细化编辑

6. 布尔运算
7. 修改图层样式
8. 矢量编辑

高级功能

9. 引用组件
10. 等间距调整
11. 响应式调整
12. 样式管理

1

yarn create react-app game_sdk

1
2

cd game_sdk
yarn start

添加路由

1

yarn add react-router-dom

1. index.js

1
2
3
4
5

import { HashRouter } from 'react-router-dom';

<HashRouter>
    <App/>
</HashRouter>

注意事项：使用HashRouter，直接访问http://localhost:3003/login是页面空白的，要注意HashRouter与BrowserRouter的区别

http://localhost:3003/#/login

项目中改为BrowserRouter，正式环境再改为HashRouter

1
2
3
4
5

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
    <App/>
</BrowserRouter>

2. router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { Routes, Route } from 'react-router-dom';

import Login from '../pages/user/Login';
import Service from '../pages/service/Service';
import MyCenter from '../pages/mycenter/MyCenter';
import Register from '../pages/user/Register';

function RootRouter() {
  return (
    <>
       <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/service" element={<Service />} />
        <Route path="/mycenter" element={<MyCenter />} />
      </Routes>
    </>
  );
}

export default RootRouter;

3. App.js

1
2
3
4
5
6
7
8
9
10
11

import RootRouter from "./router";

function App() {
  return (
    <>
       <RootRouter/>
    </>
  );
}

export default App;

使用antd（项目中使用antd)

1

yarn add antd

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

1

@import '~antd/dist/antd.css';

高级配置——使用less

安装 craco

1

yarn add @craco/craco

修改 package.json 里的 scripts 属性。

1
2
3
4
5
6
7
8
9

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

在项目根目录创建一个 craco.config.js 用于修改默认配置。

1
2
3
4

/* craco.config.js */
module.exports = {
  // ...
};

引入 craco-less 来帮助加载 less 样式和修改变量

src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

1
2
3
4
5
6

/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

安装 craco-less

1

yarn add craco-less

修改 craco.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#f6c700' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

注意：配置完，要重启项目

这里是配置主题颜色，不改变主题颜色，可不加

1

modifyVars: { '@primary-color': '#f6c700' },

报错信息：Warning: [antd: Form.Item] defaultValuewill not work on controlled Field. You should useinitialValues of Form instead.

修改之前：

1
2
3
4
5
6
7
8

<Form.Item
    name="username"
>
    <Input
    type="text"
    defaultValue= {user.name}
    />
</Form.Item>

解决方法：initialValue

1
2
3
4
5
6
7
8
9

<Form.Item
    name="username"
    initialValue={user.name}
>
    <Input
    type="text"
    // defaultValue= {user.name}
    />
</Form.Item>

或 initialValues

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 <Form
    name="normal_login"
    className="login-form"
    size="large"
    initialValues={{
        username: user.name,
    }}
    onFinish={onFinish}
  >
    <Form.Item
        name="username"
        // initialValue={user.name}
    >
        <Input
        type="text"
        // defaultValue= {user.name}
        />
    </Form.Item>
</Form>  

在react中引入外链H5页面

1.使用react-iframe

1
2
3
4
5
6

import Iframe from "react-iframe";
<Iframe 
    url="https://www.qunar.com/"
    width="100%"
    height="100%"
/>

2.直接使用iframe标签——项目中使用这种

1
2
3
4
5
6
7

<iframe  
// scrolling="yes" 
frameBorder="0" 
title='外部页面'
style={{width:'100%',height:"100vh", overflow:'hidden'}}
src="https://www.qunar.com/"
/>

状态管理 - Redux Toolkit

1

yarn @reduxjs/toolkit react-redux

复制功能-copy-to-clipboard

1
2
3

import copy from 'copy-to-clipboard';

copy(内容)

也可以使用Ant Design Mobile

1

yarn add antd-mobile

打包

1.相对地址

1

"homepage": "."

2.改为HashRouter

本地查看

1
2
3
4
5
6

The build folder is ready to be deployed.
You may serve it with a static server:

yarn global add serve
serve -s build

启动项目注意事项：

1. 启动Apifox应用——项目的mock接口

项目目录结构

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

src
│  App.js
│  App.less
│  App.test.js
│  index.css
│  index.js
│  reportWebVitals.js
│  setupTests.js
│
├─api					——接口文件（分模块）
│      source.js		——素材管理模块相关Api
│      user.js			——用户模块相关Api
│
├─app								——app公用
│      BreadcrumbMap.jsx			——面包屑相关配置
│      leftMenus.js					——左侧导航栏相关数据
│      leftMenus—对应旧的LeftNav.js	  ——antd左侧导航旧版的做法
│      rootReducers.js				——reducer的集合
│      router.js					——路由配置
│      store.js						——store的配置
│
├─assets							——静态资源
│  ├─css
│  │      style.css
│  │
│  ├─images
│  │      header.jpeg
│  │
│  └─less							
│          common.less				——公用样式
│          cover_antd.less			——覆盖antd默认样式的样式文件
│          style.less				——其他样式
│
├─components						——组件集合
│  │  Bottom.jsx					——页面底部
│  │  EditableTable.jsx				——可编辑表格
│  │  LeftNav-旧的使用方法.jsx
│  │  LeftNav.jsx					——左侧导航栏组件
│  │  Top.jsx						——页面顶部
│  │
│  └─charts							——图表相关组件
│          LineChart.jsx			——线性图组件
│
├─pages								——页面组件（根据模块划分）
│  ├─agent
│  │      Account.jsx
│  │      AddAccount.jsx
│  │      AddAgent.jsx
│  │      Agent.jsx
│  │
│  ├─dashboard
│  │      Overview.jsx
│  │
│  ├─group
│  │      AddGroup.jsx
│  │      Group.jsx
│  │
│  ├─home
│  │      Container.jsx
│  │      Home.jsx
│  │
│  ├─login
│  │      Login.jsx
│  │
│  ├─manage
│  │      Customevent.jsx
│  │      Datacb.jsx
│  │
│  ├─product
│  │      AddProduct.jsx
│  │      EditProduct.jsx
│  │      Product.jsx
│  │
│  ├─source
│  │      AddSource.jsx
│  │      EditSource.jsx
│  │      Source.jsx
│  │      SourceUpload.jsx
│  │
│  ├─tool
│  │      Attribute.jsx
│  │      Logtool.jsx
│  │
│  └─user
│          EditPassword.jsx
│
├─reducers							——reducers相关（根据模块划分）
│      userSlice.js					——用户模块相关reducer处理
│
└─utils								——自定义相关文件
        fetchUtil.js				——接口请求相关封装

项目笔记

在 create-react-app 中使用

注：先引入less，免得后面再来配置的时候，由于依赖包之间的版本之间存在冲突问题。

安装和初始化

1

yarn create react-app ad_manage_react

1
2

cd antd-demo
yarn start

安装并引入 antd

1

yarn add antd

安装 craco 并修改 package.json 里的 scripts 属性

1

yarn add @craco/craco

1
2
3
4
5
6
7
8
9

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

在项目根目录创建一个 craco.config.js 用于修改默认配置

自定义主题

首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

1
2
3

/* src/App.js */
- import './App.css';
+ import './App.less';

1
2
3

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

然后安装 craco-less 并修改 craco.config.js 文件如下。

1

yarn add craco-less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

添加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
2
3
4
5
6

let sourceList = [];
useEffect(() => {
    getSourcesList(1).then(res => {
    	sourceList = res
    })
},[])

改为：

注：useEffect后面的依赖项，要加[]，不加，会一直执行这个方法。

1
2
3
4
5
6
7
8

const [sourceList, setSourceList] = useState([]);
useEffect(() => {
    getSourcesList(1).then(res => {
      console.log('res获取素材列表');
      console.log(res);
      setSourceList(res)
    })
},[])

使用数据图表

使用echarts-for-react数据图表

ECharts for React

ECharts–官网文档

注：要安装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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import React from 'react';
import ReactECharts from 'echarts-for-react';
const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
};


<ReactECharts option={options} />

工具栏组件

toolbox

echart图表生成表格

toolbox—features—dataView

将echarts的数据视图装换为table表格,并且导出excel

将ECHARTS的数据视图展示为TABLE并且导出EXCEL

一、使用工具栏的方法

工具栏生成表格的设置，在toolbox->feature->dataView中设置

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

const options = {
    xAxis: {
      type: 'category',
      name: '日期',
      key: 'date',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    legend: {
      data: ['自然量', '推广量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        name: '自然量',
        key: 'nature',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '推广量',
        key: 'spread',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      feature: {
        dataView: {
          show: true,
          readOnly: false,
          lang: ['', '关闭', '刷新'],
          optionToContent: function(opt) {
            var axisData = opt.xAxis[0].data;
            var series = opt.series;
            var table = '<table class="chart-table" style="width:100%;text-align:center" border="1">'+
                      '<thead><tr>'
                        + '<th>时间</th>'
                        + '<th>时间</th>'
                        + '<th>时间</th>'
                      +'</thead></tr>'
                       + '<tbody>';
            for (var i = 0, l = axisData.length; i < l; i++) {
                table += '<tr>'
                         + '<td>' + axisData[i] + '</td>'
                         + '<td>' + series[0].data[i] + '</td>'
                         + '<td>' + series[0].data[i] + '</td>'
                         + '</tr>';
            }
            table += '</tbody></table>';
            return table;
          }
        },
      }
    },
};

1
2
3
4
5

const onChartReadyCallback = (echarts) =>{
    myLineChart = echarts;
}

<ReactECharts option={options} onChartReady={onChartReadyCallback}/>

二、自定义表格的方法

需要设置toolbox属性

缺点：表头的固定不好设置

设置dataView为不可见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.....

feature: {
   dataView: {
      show: true
   }
}
......

let myLineChart = '';
const onChartReadyCallback = (echarts) =>{
    myLineChart = echarts;
}

const toggleToTable = () => {
	let opt = myLineChart.getOption();
	var tbHtml = opt.toolbox[0].feature.dataView.optionToContent(opt);
	
	// 然后将生成的HTML填充到对应的节点
}


<div onClick={toggleToTable}>生成表格</div>

三、使用antd生成表格

注：

1. 主要是处理columns和dataSource数据
2. 不需要设置toolbox属性

legend

图例组件展现了不同系列的标记(symbol)，颜色和名字

1
2
3

legend: {
  data: ['自然量', '推广量']
},

grid

设置这个位置，可以让legend显示在图表上方位置，而不是覆盖在图表上

直角坐标系内绘图网格

1
2
3
4
5
6

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true  //grid 区域是否包含坐标轴的刻度标签。
},

折叠图叠加

series

1
2
3
4
5
6
7
8
9
10
11
12

{
    name: '自然量',
    type: 'line',
    stack: 'Total',
    data: [120, 132, 101, 134, 90, 230, 210]
},
{
    name: '推广量',
    type: 'line',
    stack: 'Total',
    data: [220, 182, 191, 234, 290, 330, 310]
},

echart添加横向滚动条

dataZoom

1
2
3
4
5
6
7

dataZoom: [
  {
    type: 'slider',
    show: true,
    xAxisIndex: [0],
  }
],

左侧导航栏-新版本的使用

1
2
3
4
5
6
7
8
9
10

const items = [
  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
  { label: '菜单项二', key: 'item-2' },
  {
    label: '子菜单',
    key: 'submenu',
    children: [{ label: '子菜单项', key: 'submenu-item-1' }],
  },
];
return <Menu items={items} />;

加上页面跳转

1
2
3
4
5
6
7
8

{
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        Navigation Four - Link
      </a>
    ),
    key: 'alipay',
},

项目中-加上页面跳转的做法

1
2
3
4
5
6
7

import { Link } from 'react-router-dom';

{
    label: ( <Link to="/product">全部产品</Link>),
    key:'/product',
    icon: <AppstoreOutlined />
},

Menu新版本—左侧导航栏完整代码

1. 左侧导航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 164

   import { 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;

2. 左侧导航-组件

   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

   import 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;

<RangePicker
  ranges={{
    '全部': [moment("2020-09-10"), moment()],
    '今天': [moment(), moment()],
    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    '近7天': [moment().subtract(6, 'days'), moment()],
    '近14天': [moment().subtract(13, 'days'), moment()],
    '近30天': [moment().subtract(29, 'days'), moment()],
  }}
  locale={locale}
  defaultValue={[moment("2020-09-10"), moment()]}
  style={{width:220}}
  onChange={onRangeChange}
  placement="bottomRight"
/>
</Form.Item>

antd表格

渲染表格的数据—–数组数据，每一项要有唯一的key值

key值相关报错：Warning: Each child in a list should have a unique "key" prop.

解决方法：

1. 在数据中添加key属性

   1 2 3 4 5 6 7 8 9 10

   [ { "key": 3215, "id": 3215, "group_id": 2, "group_name": "测试项目", "create_by": "10000" } .... ]

2. 使用别的唯一性的属性： 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
2

yarn add default-passive-events  或  cnpm i default-passive-events -S
并在 App.js 中 import 'default-passive-events';

加上以上配置之后，

报错：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
2
3
4
5
6

if (event.preventDefault) {
    //event.preventDefault(); // $FlowFixMe - flow is not aware of `unknown` in IE
  } else if (typeof event.returnValue !== 'unknown') {
    event.returnValue = false;
}

React中轮播报错pan-y不起作用Unable to preventDefault inside passive event listener invocation