antd常见问题

1. Modal组件 ，open 代替 visible
   1. [antd: Modal] visible will be removed in next major version, please use open instead.
2. df
3. sdf
4. 
   

items 代替 children

Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use items directly.
Warning: [antd: Menu] children will be removed in next major version. Please use items instead.
更新组件有

1. Tabs
2. Menu

antd 更新导致警告 https://ant.design/components/menu-cn/
使用items替代 可以消除警报

items数据格式

• label 必填项
• key 必填项

  {
  // label: '子菜单',
  label: <Link>{name}</Link>,
  key: 'submenu',
  children: [{ label: '子菜单项', key: 'submenu-item-1' }],
  icon: <HomeOutlined />,
  onClick: () => navigate.
  }

  菜单参考 https://blog.csdn.net/weixin_47287832/article/details/124572802

Menu

Warning: Received true for a non-boolean attribute move. If you want to write it to the DOM, pass a string instead: moe=”true” or move={value.toString()}.
原因：React对boolean类型的attribute的识别方式问题
解决：可以使用1和0的方式来代替true和false
https://github.com/styled-components/styled-components/issues/1198

<CreateForm move={true} />
<CreateForm move={props.move ? 1 : 0} />

Warning: React does not recognize the dataSource prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dataSource instead. If you accidentally passed it from a parent component, remove it from the DOM element.
解决：将数组里的字段名为’dataSource’转换成小写

Link组件报错

You should not use outside a

_target=blank丢失 state参数

在Link里面加个 target=”_blank”，state里面的值就是undefined
原因分析：
在新窗口打开的话, 已经脱离了当前的页面 state, 相当于window.open 新窗口，这样就已经不是单页面应用
如果想要在新窗口打开的页面之间传递参数, 还是稳妥的用 search，或hash
**URLSearchParams(window.location.search)**
子应用 state，新页面打开，刷新也会丢失参数

<Link 
  to={{
    pathname: '/list/detail',
    search: '?userid=23',
    hash: '#group',
    state: { query: true }
  }}
/>
// _blank不要用 state，会丢失 state参数
<Link 
  target="_blank" 
    to={{
    pathname: '/courses',
       search: '?userid=23',
    hash: '#group',
    state: { query: true }
  }}
/>

Sider侧边栏组件

trigger 隐藏侧边栏的收起箭头

Menu inlineCollapsed not control Menu

Warning: [antd: Menu] inlineCollapsed not control Menu under Sider. Should set collapsed on Sider instead
原因：Menu放Sider中时，展开收缩控制应由 Sider处理，Menu自己处理无效

正确写法如下 https://ant-design.antgroup.com/components/layout-cn/#Layout.Sider

错误写法，去掉 Menu组件的 collapsed和 inlineCollapsed

<Sider collapsible>
  <Menu
    key="menu"
    mode="inline"
    // collapsed: collapsed,
    // inlineCollapsed={collapsed}
    item={items}
  />
</Sider>

tooltip不显示

tooltip正确的用法

<Tooltip>
  {
    show
      ? <span>{title}&nbsp;&nbsp;<Icon type="info-circle" /></span>
      : <Icon type="info-circle" />
  }
</Tooltip>

tooltip错误的用法

1. <></>，多个元素空标签的写法

   <Tooltip>
   {
    show
      ? <>{title}&nbsp;&nbsp;<Icon type="info-circle" /></>
      : <Icon type="info-circle" />
   }
   </Tooltip>

2. 封装组件的写法，封装组件也会不显示 tooltip ```jsx

TipTitle.propTypes = { show: PropTypes.bool, title: PropTypes.string }

function TipTitle({show, title}) { if (!show) return return {title}   }

<a name="JsISq"></a>
### 全屏下不显示 tooltip问题
1. 因为tooltip是定位到父节点的，全屏后或者页面发生变化后，可能会导致tooltip找不到父节点的位置
2. 需要加一个属性来给tooltip绑定它的父节点
3. 类似的**因为页面位置发生变化而找不到的有联系的组件**都可以使用这个来尝试
4. antd tooltip 文档 [https://ant.design/components/tooltip-cn/](https://ant.design/components/tooltip-cn/)
<a name="cLbn3"></a>
### getPopupContainer
1. `getPopupContainer`返回值是一个`DOM`元素
2. 可以用`document.querySelector('.table')`
![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1612144478644-48085d43-3500-4cf1-96ae-5ad4c540161a.png#height=50&id=hM1dc&originHeight=67&originWidth=881&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10218&status=done&style=none&title=&width=661)
```jsx
getPopupContainer={() => document.getElementsByClassName("img-opt")[0]}
getPopupContainer={trigger => trigger.parentNode}
<Tooltip 
  placement="bottomRight" 
  title={content} 
  trigger="click"
  getPopupContainer={() => document.querySelector('.table-wrap')}
  >
  <Icon type="caret-down"/>
</Tooltip>

table表格 tooltip

render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

1. 表格有很多数据，当滚动的时候，tooltip不随着当前的单元格一同向上或者向下滑动
2. 这就需要用到getPopupContainer属性，让它挂载到当前行tr上面，或者是整个滚动的ant-table-body上面
3. 挂载在ant-table-body上面，出现的问题：当鼠标滑动到一行的单元格时，tooltip元素上方溢出表格的内容被覆盖，设置z-index完全无效
   1. 把表格的scroll={y:600}的溢出滚动去掉时，就不会被遮挡，
   2. 分析：父元素的溢出滚动原因，当父元素设置了溢出滚动，该定位的子元素，超出了父元素的上方的时候溢出部分被裁掉了
   3. 解决：把父元素的position:static就好用