react antd 组件使用笔记

288 阅读2分钟

本篇文章主要记录在使用antd组件时,遇到的几个小问题,特此记录,同时也想强调下仔细查看官方文档真的很重要哦!

本篇记录的问题分别是:

  1. table组件排序时去除“取消排序”选项
  2. table组件本地排序按字段值首字母排序
  3. modal组件设置是否可见属性报红

Ant Design的Table组件去除“取消排序”选项

当我们像官方文档demo中这样设置sortDirections: ['descend']时,会发现点击排序时会有三种状态:点击升序、点击降序、取消排序。而当我们只需要升序和降序,不需要取消排序时,我们可以这样做:

sortDirections:['ascend', 'descend', 'ascend']

在我解决这个问题的过程中,也在百度中搜索了下,千篇一律而且比较复杂的方法劝退了我。我就继续回到官方文档,找到了这个答案。摘自官网 ↓

图片.png

Ant Design的table组件按字段值首字母排序

当我们需要本地对类似name的字段进行排序时,可以使用localeCompare这个方法:

sorter: (a, b) => a.name.localeCompare(b.name)

图片.png

了解更多戳这里 localeCompare

Ant Design的modal组件设置是否可见属性报红

这个问题主要是提醒我,在看官方文档时,要先确认下项目中使用的版本和所阅读的官方文档的版本是否一致,不同版本,一些属性的使用会有一些变化。如果你也遇到这种问题,多半就是这个原因了:

图片.png

在最新的文档4.23.0版本中,设置modal组件是否可见属性改名了,由原来的visible改为了open。

图片.png

好啦,本篇就记录到这儿。起来运动一哈吧~

b5af6672b1d6444da871404b629b2c90.gif