Antd

关注咱们的同学能够晓得在往年（2022）年初的时候咱们公布了一篇《Plan about Ant Design V5》 ，来介绍咱们将要启动的 5.0 打算。社区在经验 8 个月的研发、公布 30 个 experimental 版本验证后，新的技术架构曾经稳固，终于公布了 v5 alpha 版本！欢送大家尝试，并提供贵重的意见。在正式版公布之前，咱们还有更多事件要做。然而如果你曾经急不可待尝鲜，能够拜访咱们的 5.0 官网（迁徙参考此处）。 新个性新的设计5.0 带来了全新的设计理念，围绕用户指标，依据「更聚焦」、「去烦扰」、「轻松感」三大准则，对 Ant Design 设计零碎在视觉上进行重塑，助力用户在虚构办公空间更加「高兴工作」。针对这些准则，咱们在以下方面作出了优化，包含但不限于： 减少梯度圆角并减少了根底圆角的大小，整体格调更轻松；缩小线条应用，以取得更高的空间使用率和更简洁的应用体验；进步了交互动画速度，交互体验更加晦涩；补充了对立的聚焦款式，仅在应用键盘聚焦时呈现，无障碍能力（Accessibility）进一步晋升。 新的动静主题计划在 4.x 版本中，受制于 less 的款式与主题计划，咱们始终解脱不了两个问题的困扰：如何动静更换主题以及如何混合应用主题。通过一段时间的摸索，在 5.0 版本中，咱们放弃了追随 antd 已久的 less 计划，转而拥抱 CSS-in-JS。CSS-in-JS 通过运行时的款式计算能力完满地解决了上述两个问题，并且为咱们带来了更多的晋升： 更小的 BundleSize；不依赖任何插件的款式按需引入能力。有了 CSS-in-JS 的技术加持，咱们推出了全新的定制主题计划。在 5.0 版本中，Design Token 将是主题的根本组成部分，所有组件都会生产他们构筑款式。同时，咱们依赖 Design Token 建设了款式的缓存，即认为在同样的 antd 版本下同样的 Design Token 所对应的组件款式是等同的，因而防止了反复生成款式进行比照的操作，防止了性能损耗。基于 Design Token 和 CSS-in-JS ，咱们制订了更加灵便的定制主题计划。通过 5.0 的定制主题，你能够做到的包含但不限于： 全局主题定制；部分主题（嵌套主题/多主题并行）；组件主题定制；在 Sketch 中间接应用配置过主题的设计稿。想要理解更多请查看定制主题文档。 新增组件5.0 版本中打算将会有一些新的组件供用户抉择！他们别离是： Tour 漫游式疏导QrCode 二维码WaterMark 水印FloatButton 悬浮按钮目前已有 FloatButton 悬浮按钮 准备就绪，欢送试用。 ...

之前的工作经验中，始终都是应用 Antd 作为根底组件进行开发，当初咱们要本人实现一套治理后盾的 UI 组件库，在写到 Tabs 这个组件的时候借鉴了 Antd 的思路，次要用到了 React Context 个性，在此记录下次要展示外围思路(仅实现受控组件)，款式细节略过，效果图如下 应用形式 const [value, setValue] = useState('1')<Tabs activeKey={value} isCache={true} onChange={value => setValue(value)}> <Tabs.Panel tabKey='1' tab='Tab Item'><div>11111</div></Tabs.Panel> <Tabs.Panel tabKey='1' tab='Tab Item'><div>11111</div></Tabs.Panel></Tabs>组件导出模块，实现 <Tabs.Panel></Tabs.Panel> 这种模式应用 // 模拟 antd 实现 https://github.com/ant-design/ant-design/blob/master/components/radio/index.tsximport TabsComps, { TTabsProp } from './Tabs'import Panel from './Panel'interface CompoundedComponent extends React.ForwardRefExoticComponent< TTabsProp & React.RefAttributes<HTMLElement> > { Panel: typeof Panel}const Tabs = TabsComps as CompoundedComponentTabs.Panel = Panelexport default Tabscontext 实现 import React from 'react'const TabsContext = React.createContext<any>(null)export default TabsContextPanel 组件实现 ...

1 antd中，input组件在触发onChange时，如果是中文输出模式，会频繁被触发，导致页面性能升高。尤其是在onChange时须要实时搜寻的状况。2 在mac设施下，如果在onChange中应用value.replace(/\s/g,''/), 会呈现无奈输出中文的问题。优化之后，能够失常输出。默认状况下的Input组件： 优化之后的ChineseInput 应用形式： 和原始Input组件应用形式一样，没用额定api index.tsx import React, { FC, useEffect, useRef, useState } from 'react';import { Input, InputProps } from 'antd';import styles from './index.module.less'interface IProps extends InputProps { [propName: string]: any; value?: string;}const Index: FC<IProps> = ( { value = '', onChange, onInput, onCompositionStart, onCompositionEnd, ...resetProps }) => { const chineseInputting = useRef(false); // 是否是中文（爽字节字符的输出）模式 const [val, setVal] = useState('') useEffect(() => { setVal(value) }, [value]) // 优化搜寻 const change = (e: any) => { onChange && onChange(e) } return ( <Input className={styles.chineseInput} {...resetProps} value={val} onChange={(e: any) => { if (e.target.value === '') { change(e) } setVal(e.target.value) }} onInput={(e: any) => { onInput && onInput(e) if (!chineseInputting.current) { change(e) } }} onCompositionStart={(e: any) => { onCompositionStart && onCompositionStart(e) chineseInputting.current = true; }} onCompositionEnd={(e: any) => { onCompositionEnd && onCompositionEnd(e) if (chineseInputting.current) { change(e) chineseInputting.current = false; } }} /> );};export default Index;index.module.less ...

ProComponent就是算是对antd的又一次集成和封装，缩小了前端对于细节和联动的解决，总之就是用起来特地爽。那这里就不对ProComponent做过多介绍了，咱们直奔主题，如何应用，或者说如何更优雅、更不便的应用组件和编写代码始终是任何一位程序员的外围谋求，我也是PiuPiuPiu~！ columns的配置treeSelectrequest能够用来调接口获取值labelInValue：是设置的取到的是这个表单项值的对象，不仅仅包含value,上面的例子取到的就是fieldNames对象 { title: '区域', dataIndex: 'areaIds', hideInTable: true, valueType: 'treeSelect', request: async () => { let res = await areaSituation(); if (res?.status == '00') { return res.data; } }, fieldProps: { showArrow: false, filterTreeNode: true, showSearch: true, dropdownMatchSelectWidth: false, autoClearSearchValue: true, treeNodeFilterProp: 'title', labelInValue: true, fieldNames: { label: 'title', lvl: 'lvl', value: 'nodeId', children: 'childrenList', }, onSelect: (_, dataObj) => { setAreaIds([]); let arr = []; let getData = (data) => { arr = [...arr, data?.nodeId]; if (data?.childrenList.length > 0) { data?.childrenList?.forEach((item) => { getData(item); }); } }; getData(dataObj); setAreaIds(arr); }, }, },dateTimeRangeProFormDateTimePicker这个是可取值到年月日时分秒ProFormDatePicker 是反对到年月日可用moment设置初始值，这个默认获得值是一个数组 如果搜寻后端须要的这个工夫字段不是数组而是其余的两个字段；可用上面的写法 ...

Antd多文件上传后盾接管为null问题在应用antd开发过程中，Upload组件的上传，个别是通过action配置后端接口地址，主动上传文件；然而当文件数量较多时，须要进行手动上传，然而手动上传后盾始终无奈接管到数据，数据为null。 代码实现前段组件代码如下： const onRemove = (file) => { this.setState((state) => { const index = state.fileList.indexOf(file); const newFileList = state.fileList.slice(); newFileList.splice(index, 1); return { fileList: newFileList, }; }); }; const beforeUpload = (file) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('请上传图片格式文件!'); return isJpgOrPng || Upload.LIST_IGNORE; } this.setState(state => ({ fileList: [...state.fileList, file], })); return false; }; <Upload fileList={fileList} onRemove={onRemove} beforeUpload={beforeUpload} directory accept=".png,.jpg,.jpeg" showUploadList={false} onChange={this.onChange} > <Button icon={<UploadOutlined />} > Click to upload </Button> </Upload>复制代码前端上传逻辑代码： ...

留神:新版的antd 曾经勾销的了dataIndex嵌套的写法，认为可能会和数据造成抵触； 原来的嵌套写法：如：dataIndex:'user.name'新的数组写法：dataIndex:['user','name'] 当然antd pro 也变了哈

针对antd pro 对立解决服务端异样的办法，留神：这里的转化是针对响应转化，后续会针对转化后的success等进行判断，如果success=false 则会触发谬误提醒，否不会触发。如下： export const request: RequestConfig = { // errorHandler, errorConfig: { adaptor: (resData, ctx) => { //如果响应的后果和前端要求的不统一，须要转化 let success = true, errorMessage = '', errorCode = 0, showType = 0; if (resData && resData.code !== undefined && resData.code !== 0) { success = false; errorMessage = resData.message; errorCode = resData.code; } else if (ctx.res.status > 300 || ctx.res.status < 200) { //对服务端非手动异样时，辨认状态码解决 success = false; errorMessage = ctx.res.statusText; errorCode = ctx.res.status; } if (resData && resData.showType !== undefined) { showType = resData.showType; } return { ...resData, success: success, errorMessage: errorMessage, errorCode: errorCode, showType: showType, }; }, }, // 新增主动增加AccessToken的申请前拦截器 //requestInterceptors: [authHeaderInterceptor],};

最近在开发我的项目时，应用了最新的antd，发现在联合动静主题更换插件 antd-theme-generator 时提醒报错： Error: ENOENT: no such file or directory, open 'xxxxx/node_modules/antd/lib/style/themes/@{root-entry-name}.less'查看Ant Design 官网也有给出更新的提醒，在动静主题（实验性）： 相干变更#为了实现 CSS Variable 并放弃原始用法兼容性，咱们于 dist/antd.xxx.less 文件中增加了 @root-entry-name: xxx; 入口注入以反对 less 动静加载对应的 less 文件。个别状况下，你不须要关注该变动。然而，如果你的我的项目中间接援用了 lib|es 目录下的 less 文件。你须要在 less 入口处配置 @root-entry-name: default; （或者 @root-entry-name: variable;）以使 less 能够找到正确的入口。 此外，咱们将 lib|es/style/minxins/index.less 中的 @import 'motion' 和 @import 'reset' 迁徙至了 lib|es/style/themes/xxx.less 中，因为这两个文件依赖了主题相干变量。如果你应用了相干外部办法，请自行调整。当然，咱们还是倡议间接应用 dist 目录下的 antd.less 文件而非调用外部文件，因为它们常常会受重构影响。 因为在没有更新到最新版本 4.17.4，antd-theme-generator 插件都没有报错，然而最新版本就是应用不了，最初在看了 antd-theme-generator 的源码后找到了问题。 问题定位：// antd-theme-generator -> index.js 458行：// 这里将所有变量捆绑到一个文件中执行报错let antdLess = await bundle({ src: antdStylesFile,});寻找问题bundle 办法是援用了 less-bundle-promise；最初定位到 less-bundle-promise 下的 buildContents 办法获取文件报错；// 21 行：imported = line.replace(stringLiteralRegex, '$1');引入的的 less 文件，后续并没有将变量 @{root-entry-name} 替换，还是原始援用，造成找不到文件；解决问题因为动静生成主题不是生产依赖，所以能够更改源码，这里我只是为了解决我的项目问题，在 21 行上面直接判断替换变量。@{root-entry-name} 替换为 default；// 解决 @{root-entry-name} 报错问题;// 当然还有更好的正则替换或其余形式，这里只是解决问题间接更改if (imported === './@{root-entry-name}.less') { imported = './default.less'}总结对于我的项目中的依赖降级过后，总会有一些兼容问题产生，咱们在网上没有解决方案时，就须要依据现有的提醒错误信息去寻找原因，查看源码也是一份必修课，望能给给位小伙伴们提供到帮忙。(^-^) ...

背景在干了大半年增删查改后（node，mysql，serverless），业务端人手短缺，老板开恩让我反对其余团队写几个页面。 久了不摸手生，除了react依稀记得，antd根本只能看着官网demo一行一行写，感觉一天能写完的，后果两天了还没联调完。两头还遇到一些似曾相识的问题，惋惜以前的教训曾经不论用了。 demo地址: https://codesandbox.io/s/antd... 这些问题在antd的仓库issue都重复被提及，看了下文，包含但不限于以下问题都将失去答案： 概括一下： Form表单，React hooks 组件，initialValues初始化数据时候，第二次、第三次……传递新值，表单没有更新，永远显示第一次数据？弹出层新建表单从新设置值不起作用？ Modal 用了destroyOnClose，外面有 Form，并应用 form.resetFields，为什么会生效？Modal中initialValues更新了，应用了form.resetFields，要间断关上两次才失效？有事说事语言形容显得太红润，所以间接看动图吧： 这是一个简略的增删查改页面，新增和编辑共享了同一个组件，冀望在关上弹窗编辑表单敞开后，从新关上时，能依据initialValues从新渲染表单, 但失去的后果是，第二次关上，编辑框没有刷新. 实现的伪代码大抵是这样： import React, { useEffect } from "react";import { Modal, Form, Input, Button, Checkbox } from "antd";export function EditModal(props) { const { visible, onOk, onCancel, content = {} } = props; const [form] = Form.useForm(); const isEdit = !!content.sort; const handlSubmit = (close) => { // 一些提交逻辑 }; useEffect(() => { // setTimeout(() => { form.resetFields(); // }); }, [content]); return ( <Modal title={`${isEdit ? "编辑" : "新建"}备注`} visible={visible} destroyOnClose onOk={onOk} onCancel={onCancel} > <Form name="basic" labelCol={{ span: 7 }} wrapperCol={{ span: 14 }} form={form} initialValues={content} autoComplete="off" > {...一些表单} </Form> </Modal> );}置信呈现问题的盆友们，大多都是和我一样，如下面这样的代码这样实现。 ...

antd是咱们罕用的一款react框架（等于没说,哈哈） 什么是ProComponents?对于一个应用这个组件开发了半年之久的菜鸟来说,什么是ProComponents,就是antd的增强集成版本,集成度很高，用起来很不便(对于我这个菜鸟来说 容易踩坑),无论是elementUi vant antd...,组件应用状况大抵相似,抽个工夫记录一下,也增深一下印象，当前再遇到新的组件也好得心应手不是。 ProFormDigit这段代码，为什么要在ProFormDigit套上form.item呢?那是因为ProFormDigit有一个bug,因为如果我间接点提交，就会跳过ProFormDigit对于输出的内容的限度,包含（数字，位数，最大值，最小值）都会没来得及校验，提交下来~~ <Form.Item style={{width:'300px'}} name="percent" rules={[ { required: true, message: '请输出调整比例', }, { pattern:/^([1-9][0-9]{0,1}|100)$/, message:'请输出1到100之间的整数', }, ]} > <ProFormDigit fieldProps={{ precision: 0 }} label="" width={150} placeholder="请输出调整比例" min={0} max={100} /> </Form.Item>这个组件是酱紫的~ 工夫组件ProFormDateRangePicker个别应用 import { ProFormDateRangePicker,} from '@ant-design/pro-form'<ProFormDateRangePicker width="md" name={['contract', 'createTime']} label="合同失效工夫" />在useColumns中应用 const columns = defineProTableColumn<MaintenanceListVo>([ { title: '投诉工夫', dataIndex: 'createTime', key: 'createTime', hideInSearch: true, }, { title:'', dataIndex: 'createTime', key: 'createTime', valueType: 'dateRange', hideInTable: true, fieldProps: { placeholder: ['投诉工夫','投诉工夫'], }, search: { transform: (value) => { return { startTime: value[0], endTime: value[1], }; }, }, }, ]); /** 解决表格列 */export function useColumns() { return { columns };}ProFormSelect 抉择框<ProFormSelect width={364} rules={[ { required: true, message: '请抉择要转让的员工', }, ]} placeholder="请抉择人员" fieldProps={{ onChange: (e) => { setData(staffList.find((item) => item.employeeId == e)); }, }} help={currentStore?.storeType === 'community' && '转让后你就不是该小区的负责人，请慎用！'} name="employeeId" options={staffList.map((item) => ({ label: item.employeeName, value: item.employeeId, }))} label="转让到" />

在业务开发过程中,应用了antd的table,为渲染大量的数据并进行性能调优，应用了virtualizedtableforantd4组件，具体如何应用参考https://cnpmjs.org/package/vi... 因为页面须要动静扭转table的高度，所以scroll的y应用了动静计算 在渲染table的时候,呈现了大量的空白,如下图所示。 于是去看了下源码,问题呈现在scroll.y应用了字符串计算,设置为字符串的时候,ctx.y会获取parentElement.offsetHeight，而因为渲染问题,所获取的值为0,最终所取得的tail为默认的10(tail就是j,overscanRowCount默认为5),所以呈现了空白景象。 else if (typeof scroll_y === "string") { /* a string, like "calc(100vh - 300px)" */ if (ctx.debug) console.warn("AntD.Table.scroll.y: ".concat(scroll_y, ", it may cause performance problems.")); ctx._raw_y = scroll_y; ctx._y = ctx.wrap_inst.current.parentElement.offsetHeight; } 晓得了起因后，就好解决了，既然你获取不到offsetHeight，那么我依据你用户传的string，我去帮你动静计算出实在后果，问题就迎刃而解了。 else if (typeof scroll_y === "string") { /* a string, like "calc(100vh - 300px)" */ if (ctx.debug) console.warn("AntD.Table.scroll.y: ".concat(scroll_y, ", it may cause performance problems.")); ctx._raw_y = scroll_y; ctx._y = transferStringToNumberSize(scroll_y); } transferStringToNumberSize函数如下: ...

问题： 解决: 成果：

题目：实现antd穿梭框的基本功能 antd的穿梭框实现有以下几个要点： 数据分为两局部，source-左侧，target-右侧选项在左右两个框中穿梭，实际上是对 source 和 target 这两个数组进行增删的数据保护上面是残缺实现，线上demo import React, { useState } from "react";import "./styles.css";export default function Transfer(props) { const [source, setSource] = useState(props.dataSource); const [target, setTarget] = useState([]); const [sourceSelectedKeys, setSourceSelectedKeys] = useState([]); const [targetSelectedKeys, setTargetSelectedKeys] = useState([]); const onSelectChange = (key, type, e) => { if (type === "source") { setSourceSelectedKeys([...sourceSelectedKeys, key]); } else { setTargetSelectedKeys([...targetSelectedKeys, key]); } }; const moveToRight = () => { const dataSourceCpy = [...source]; const moveItem = dataSourceCpy.filter((item) => sourceSelectedKeys.includes(item.key) ); const newSource = dataSourceCpy.filter( (item) => !sourceSelectedKeys.includes(item.key) ); setTarget([...moveItem, ...target]); setSource(newSource); setSourceSelectedKeys([]); }; const moveToLeft = () => { const targetCpy = [...target]; const moveItem = targetCpy.filter((item) => targetSelectedKeys.includes(item.key) ); const newTarget = targetCpy.filter( (item) => !targetSelectedKeys.includes(item.key) ); setTarget(newTarget); setSource([...moveItem, ...source]); setTargetSelectedKeys([]); }; const handleTransfer = (type) => { if (type === "right") { moveToRight(); } else { moveToLeft(); } }; return ( <div className="container"> <div className="dataSource"> {source.map((item) => { return ( <div key={item.key}> <input type="checkbox" name={item.title} onChange={(e) => { onSelectChange(item.key, "source", e); }} /> <label htmlFor={item.title}>{item.title}</label> </div> ); })} </div> <div className="operation"> <button onClick={() => { handleTransfer("right"); }} > {">"} </button> <button onClick={() => { handleTransfer("left"); }} > {"<"} </button> </div> <div className="target"> {target.map((item) => { return ( <div key={item.key}> <input type="checkbox" name={item.title} onChange={(e) => { onSelectChange(item.key, "target", e); }} /> <label htmlFor={item.title}>{item.title}</label> </div> ); })} </div> </div> );}.container { display: flex;}.dataSource { border: 1px solid black; width: 200px; height: 300px;}.operation { display: flex; flex-direction: column;}.target { border: 1px solid black; width: 200px; height: 300px;}

.ant-table-wrapper { width: 98%; height: 100%; position: relative; top: 30px;}.ant-table { background-color: rgb(9,100,100); color: white;}// 表头款式.ant-table-thead > tr > th { background-color: rgb(3,50,50); color: white;}// 批改选中行款式.ant-table-tbody { > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{ background-color: rgb(18, 75, 75) !important; }}// 去除边框，留左边框 && 表格内容居中 && 行高.ant-table-tbody > tr > td ,.ant-table-thead > tr > th{ border-bottom: none; border-right: 1px solid #ccc; text-align: center !important; padding: 10px 10px !important;}// 去除表头最左边边框.ant-table-container table > thead > tr:first-child th:last-child { border-right: none;}// 去除tbody最左边边框.ant-table-container table > tbody > tr td:last-child { border-right: none;}// 暂无数据款式.ant-empty-description { color: white;}// 奇数行.table-color-odd { background-color: rgb(9, 100, 100);}// 偶数行.table-color-even { background-color: rgb(19, 147, 147);}

最近在做和时间段范畴相干的，预设罕用的日期范畴能够进步用户体验。能够说 antd 的组件是很不错的，然而美中不足的是，不反对预设范畴回填选中，怎么办？在此基础上封装一下好了。 先来看下效果图： 未选中： 选中回填： 看了下渲染进去的 html 内容，用的是 Tag 实现的。那我也这么实现好了。 次要是利用 RangePicker 的 renderExtraFooter 进行解决。如果回填值和预设值统一，就设置选中，否则就不选中。 还有一个要害的点：就是选中预设的 tag 后，须要敞开日期抉择弹窗。所以还须要额定的解决 open。 具体实现看上面代码： // rangePicker.tsx import React, { forwardRef } from 'react'import { Tag, DatePicker } from 'antd';import { useState } from 'react';import { RangePickerProps, RangePickerValue } from 'antd/lib/date-picker/interface';const { RangePicker } = DatePickerconst Index = ({value, ranges = {}, onChange, open, format = "YYYY-MM-DD", ...props}: RangePickerProps, ref: any) => { const [val, setVal] = useState(value) const [show, setShow] = useState(open) const isDateSame = (key: string) => { const [start, end] = ranges[key] as RangePickerValue return val && val.length && start && end ? start.isSame(val[0]) && end.isSame(val[1]) : false } const tagCheck = (key: string) => () => { setVal(ranges[key]) const [start, end] = ranges[key] as RangePickerValue onChange && onChange(ranges[key] as RangePickerValue, [start ? start.format(format as string) : '', end ? end.format(format as string) : '']) setShow(false) } const footRanges = () => ( <div className="range-quick-selector"> {Object.keys(ranges).map(key => ( <Tag key={key} onClick={tagCheck(key)} color={isDateSame(key) ? 'blue' : ''}>{key}</Tag> ))} </div> ) const onOpenChange = (status: boolean) => { setShow(status) } const onChangeFn = (dates: RangePickerValue, dateStrings: [string, string]) => { onChange && onChange(dates, dateStrings) setVal(dates) } return ( <RangePicker renderExtraFooter={footRanges} value={val} onChange={onChangeFn} onOpenChange={onOpenChange} open={show} format={format} {...props} /> )}export default forwardRef(Index)怎么用呢？原来怎么应用，当初就怎么应用： ...

因为路由是存在 initialState 这个 Hooks 中，如下： const { initialState, setInitialState } = useModel('@@initialState');所以只须要在登录的逻辑中利用这段代码即可： // 本人写的近程申请接口import { R_Menu } from '@/services/builder';// 导入零碎默认的菜单import SystemRoutes from '@/../config/routes'; const fetchUserInfo = async () => { const userInfo = await initialState?.fetchUserInfo?.(); // 从近程接口拉取菜单 const menu = await R_Menu(); // 合并零碎路由 & 业务菜单 const mergeMenu = SystemRoutes.concat(menu); if (userInfo) { setInitialState({ fetchUserInfo(): Promise<API.CurrentUser | undefined> { return Promise.resolve(undefined); }, settings: undefined, ...initialState, menuData: mergeMenu, // 留神：在这里笼罩即可 currentUser: userInfo }); } };

antd select组件没有一键全选、全不选性能利用dropdownRender这个api 自定义下拉框内容减少全选、全不选option项 const selectGroup = (groupIds: number[]) => { this.setState({ groupIds: groupIds }); this.props.form.setFieldsValue({'department': groupIds});};const selectAllGroup = () => { selectGroup(departmentList.map(({ projectGroupId }) => projectGroupId));};const deselectAllGroup = () => { selectGroup([]);};<FormItem className={styles.nameWrapper} label={formatMessage({ id: 'project.process.department' })}> {getFieldDecorator('department', {})( <FormItemWithTooltip title={this.state.departmentTooltip}> <Select placeholder={formatMessage({ id: 'please.select' })} className={styles.templateName} getPopupContainer={trigger => trigger.parentNode as HTMLElement} allowClear mode="multiple" maxTagCount={5} showArrow filterOption={(value, option) => (option.props.children as string).includes(value) } dropdownRender={(menuNode, props) => { const allChecked = this.state.groupIds.length === departmentList.length; return ( <> <div className={styles.checkAll} onClick={ allChecked ? deselectAllGroup : selectAllGroup } onMouseDown={e => { e.preventDefault(); return false; }} > {allChecked ? formatMessage({id: 'upload.list.select.none'}) : formatMessage({id: 'upload.list.select.all'})} </div> {menuNode} </> ); }} onChange={(value: number[]) => { selectGroup(value); }} > {departmentList.map(({ projectGroupId, projectGroupName }) => { return ( <Option value={projectGroupId} key={projectGroupId} title={projectGroupName}> {projectGroupName} </Option> ); })} </Select> </FormItemWithTooltip> )}</FormItem>

当type为1是不显示‘操作’列 filter写在这里页面初始化只执行一次this.columns = [ { title: '姓名', dataIndex: 'xm', key: 'xm', }, { title: '操作', dataIndex: 'handle', key: 'handle', },].filter((item)=>{ if(this.state.type==1){ return item.title!="操作" }else{ return item }})放在<Table columns={this.columns.filter((item)=>{ if(this.state.type==1){ return item.title!="操作" }else{ return item }}} 依据state type的扭转而执行

因为官网没有给出这个x的点击事件的监听hook，所以只能本人曲线救过。 依据文档阐明： onSearchThe callback function triggered when you click on the search-icon, the clear-icon or press the Enter key 能够理解到onSearch的触发条件。 而后通过event对象进行触发类型的判断。 onSearch = (value, event) => { if (event.nativeEvent.type === 'click' && value === '') { // listen click setTimeout(() => { // TODO }, 300); } if (event.nativeEvent.type === 'enter' && value === '') { // Enter setTimeout(() => { // TODO }, 300); } if (value === '') { return; } // search};

问题简述：在页面刷新时，meun高亮会跳回设置的默认项，而页面还是浏览器地址对应的页面，从而呈现高亮与理论页面不匹配的景象。 解决办法:引入withRouter包裹导航组件，并在Menu里设置selectedKeys属性。 代码如下: //引入withRouterimport { withRouter } from 'react-router-dom'//包裹导航组件export default withRouter(Home)//设置Menu的selectedKeys属性<Menu theme="dark" mode="inline" selectedKeys = {[this.props.location.pathname]} defaultSelectedKeys={['register']}>附上官网文档链接：React Router-withRouterAntd menu api

antd上传组件upload上传文件时，不断更新上传status返回的值 handleUpload=(data)=>{     const fileList=data.fileList;     this.setState({    //上传文件一直监听status          fileList,     }) }