Antd 问题点汇总目前 antd 版本：5.6.1 1. Form Form onFinishFailed error

目前 antd 版本：5.6.1

1. antd 样式会和 tailwindcss 样式冲突

// tailwind.config.js
module.exports = {
// ...other
  
  // 自定义文件可能并不在 src 下面的二层目录下，需要自定义 tailwind css 样式适用的文件
  content: ['']

  corePlugins: {
    // Remove Tailwind CSS's preflight style so it can use the antd's preflight instead (reset.css)
    preflight: false
  },
  
// ...other
}

2. Form

Form onFinishFailed errorInfo Type

问题分析总结：

'antd/es/form/interface' 中发现没有这个接口，在这个文件中发现可以跳转到 ValidateErrorEntity 的文件：'rc-field-form/interface'
直接写成 import ValidateErrorEntity from 'rc-field-form/interface', 会发现还是没有引用成功，此时会发现是没有写成 type {} 的类型，故而报错

import type { ValidateErrorEntity } from 'rc-field-form/lib/interface'

interface IFormObject {
  username: string
  password: string
}

const onFormParamsFinishFailed = (errorInfo: ValidateErrorEntity<IFormObject>) => {
    message.error(errorInfo.errorFields[0].errors[0])
  }

2. Form rules 问题描述：当 Form item 有多个 rules 时，此时如果出错，那么所有的错误都会显示出来，这种效果并不是我们期望的，我们只希望只显示第一个，此时可以使用 CSS 方式实现。只需要加上以下代码就可以解决此问题。

form div.ant-form-item-explain .ant-form-item-explain-error:not(:first-child) {
  display: none;
}

3. Grid

问题描述：Grid 中的 Row 指定 gutter 后，会出现 margin-left 和 margin-right 出现 -10px 的误差，页面会出现水平滚动条，为解决这个问题，我们可以使用 css 修改上述值。

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
  padding-left: 0 !important;
}
.ant-col:last-child {
  padding-right: 0 !important;
}

4. Message

问题描述：当使用 message.useMessage() 中的 messageApi 方法时，会出现以下错误警告：

此时，可以直接使用 message.error(), 此版本中是不需要引入 message 的，可以直接全局使用。

5. Popover

问题描述：点击时不应该手动设置 visible，否则点击内部设置 visible 为 false 时不会关闭弹窗。

PS：Popover 的 visible 是根据 onVisibleChange 来控制的

1. visible 设置

错误代码

const editName = () => {
  setVisible(true)
}
const handleSubmit = (e) => {
    e.preventDefault()
    // 这种情况下关闭弹窗没有效果
    setVisible(false)
}
  
  const content = (
    <div style={{
      display: 'flex',
      alignItems: 'center'
    }}>
      <span style={{ display: 'inline-block', width: '100px' }}>分析项名称:</span>
      <Input placeholder="请输入" allowClear value={updatedName} onChange={e => changeName(e.target.value)} />
      <Button type="primary" className="ml10" onClick={handleSubmit}>
        确定
      </Button>
    </div>
  )
  
<span
    style={{
      marginLeft: 3,
      color: '#1e72f5',
      cursor: 'pointer'
    }}
    onClick={editName}
  >
    <Popover
      overlayStyle={{ width: '496px' }}
      placement="rightTop"
      visible={visible}
      trigger="click"
      content={content}
      onVisibleChange={changeVisible}
    >
      <EditOutlined />
    </Popover>
  </span>

2. 正确代码

const changeVisible = (visible) => {
    setVisible(visible)
    if (!visible) {
      setUpdatedName('')
    }
  }
const handleSubmit = (e) => {
    e.preventDefault()
    changeVisible(false)
}
  
  const content = (
    <div style={{
      display: 'flex',
      alignItems: 'center'
    }}>
      <span style={{ display: 'inline-block', width: '100px' }}>分析项名称:</span>
      <Input placeholder="请输入" allowClear value={updatedName} onChange={e => changeName(e.target.value)} />
      <Button type="primary" className="ml10" onClick={handleSubmit}>
        确定
      </Button>
    </div>
  )
  
<span
    style={{
      marginLeft: 3,
      color: '#1e72f5',
      cursor: 'pointer'
    }}
  >
    <Popover
      overlayStyle={{ width: '496px' }}
      placement="rightTop"
      visible={visible}
      trigger="click"
      content={content}
      onVisibleChange={changeVisible}
    >
      <EditOutlined />
    </Popover>
  </span>

6. Tree

6.1 TreeNode 页面渲染数据错乱问题

问题描述

项目里面遇到一个问题：通过 TreeNode 渲染出来的树状结构，在前一个页面中有全量数据，但是在当前页面中数据量并不是很多，但是会渲染出上一个页面的部分数据，通过排查，发现是因为 TreeNode 组件中的 key 是以 pName-name 作为主键的，而这个并不是唯一的，所以会出现这种情况

解决方案

使用 uuid 组件作为唯一主键。