使用ant-design使用select或者popconfirm页面滚动, select框和选项...

wwwwwllllk · 发表于 2022-11-22 21:18:09

本帖最后由 wwwwwllllk 于 2022-11-22 21:21 编辑

全局使用

import SideDemo from './router/SiderDemo'
import { ConfigProvider } from 'antd';
function App() {
  return (
    <ConfigProvider 
    getPopupContainer={node => {
      if (node) {
        return node.parentNode;
      }
      return document.body;
    }}
    >
      <div className="App">
       <SideDemo/>
      </div>
    </ConfigProvider>
  );
}

export default App;

局部使用

import React from 'react';
import { message, Popconfirm } from 'antd';
const confirm = (e) => {
  console.log(e);
  message.success('Click on Yes');
};
const cancel = (e) => {
  console.log(e);
  message.error('Click on No');
};
const MyPopconfirm = () => (
  <Popconfirm

    // 第一种写法可以
    // getPopupContainer={node => {
    //   if (node) {
    //     return node.parentNode;
    //   }
    //   return document.body;
    // }}

    // 第二种写法也可以(其实两个都一样)
    // getPopupContainer={triggerNode => triggerNode.parentNode }

    // 这种写法也可以(为什么会有第三种写法，因为ts中上面两种报错了，报错我也看不太懂) 
    // getPopupContainer={(triggerNode) => triggerNode} 

    title="Are you sure to delete this task?"
    onConfirm={confirm}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >
    <a href="#">Delete</a>
  </Popconfirm>
);
export default MyPopconfirm;

使用ant-design使用select或者popconfirm页面滚动, select框和选项分离问题

解决方案

我会写第三种是因为ts中前两种会报一下错误，不管我怎么改，它就是报如下报错(希望有大佬解答)

lQLPJxbln4598eTNAcDNBMSwQcxOcBxrCvUDeUf0EwD0AA_1220_448.png

lQLPJxbln6W81S7NAcTNBSywyD9padcViKQDeUgZqECJAA_1324_452.png

但是我们的项目中写了好多，一个一个的改有点麻烦，能不能全局改呢，antd-design也给了解决方法。我们在最外层加上即可

官方地址：https://ant.design/components/config-provider-cn

ts里面这样写我还没试，不知道会不会报错。但是上面的写法会导致modal报错我们得这样写。

issue:https://github.com/ant-design/ant-design/issues/19974

https://ant.design/docs/react/faq-cn#select-dropdown-datepicker-timepicker-popover-popconfirm-%E4%BC%9A%E8%B7%9F%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%B8%8A%E4%B8%8B%E7%A7%BB%E5%8A%A8

https://ant.design/components/config-provider-cn#%E9%85%8D%E7%BD%AE-getpopupcontainer-%E5%AF%BC%E8%87%B4-modal-%E6%8A%A5%E9%94%99

李恒道 · 发表于 2022-11-22 21:57:38

接收的类型是一个HTMLElement类型
他的parentNode类型是 readonly parentNode: ParentNode | null;
所以函数类型是
parentNode=》 ParentNode | null;
要求函数类型是
parentNode=》 ParentNode ;
从集合来讲
应该是参数协变，返回逆变
而此时返回发生了协变行为
所以说触发报错
如果在保证parentNode有值的情况下搞个any就行

ts低版本没报错应该是因为低版本是双变得原因

结论：直接关闭ts的协变检测就可以

wwwwwllllk · 发表于 2022-11-22 22:12:35

李恒道发表于 2022-11-22 21:57
接收的类型是一个HTMLElement类型
他的parentNode类型是 readonly parentNode: ParentNode | null;
所以 ...

它报的那个提示好像就是存在没值得情况

getPopupContainer={node => {
   if (node) {
      return node.parentNode;
   }
   return document.body;
}}

我感觉这个就应该不报错的，但是它还是报错了。搞不懂

wwwwwllllk · 发表于 2022-11-22 22:14:41

wwwwwllllk 发表于 2022-11-22 22:12
它报的那个提示好像就是存在没值得情况

getPopupContainer={node => {

return triggerNode!.parentNode
return triggerNode?.parentNode

这个当时也试过了

李恒道 · 发表于 2022-11-22 22:25:54

wwwwwllllk 发表于 2022-11-22 22:12
它报的那个提示好像就是存在没值得情况

getPopupContainer={node => {

这个依然是一个协变
getPopupContainer={node => {
return node.parentNode??node;
}}
试一下

wwwwwllllk · 发表于 2022-11-22 22:44:17

李恒道发表于 2022-11-22 22:25
这个依然是一个协变
getPopupContainer={node => {
return node.parentNode??node;

结论：直接关闭ts的协变检测就可以这个监测还能关，怎么关？

李恒道 · 发表于 2022-11-22 23:02:58

wwwwwllllk 发表于 2022-11-22 22:44
结论：直接关闭ts的协变检测就可以这个监测还能关，怎么关？

在tsconfig里面
具体可以参考ts配置项文档
但是这个是全局的
关了其他地方的协变检测也会关掉
如果骚一点的方法
你可以对ConfigProvide做一层封装，自己来做曾中间件来搞
用的地方少的话就手动替换
多的话就加层ast插件自动替换antd路径

李恒道 · 发表于 2022-11-22 23:49:12

wwwwwllllk 发表于 2022-11-22 22:44
结论：直接关闭ts的协变检测就可以这个监测还能关，怎么关？

getPopupContainer={node => {
return node.parentNode??node;
}}
话说这个是不是能解决错误
如果是的话就是协变问题
我对着代码虚空输出的...

李恒道 · 发表于 2022-11-23 02:37:48

我突然想起来不确定改配置是有用还是没用的，双变主要是针对的参数，返回值的特性我忘了。。。

wwwwwllllk · 发表于 2022-11-23 14:00:18

李恒道发表于 2022-11-22 23:02
在tsconfig里面
具体可以参考ts配置项文档
但是这个是全局的

直接node:any完美解决
补充：这样了些了以后的意思就是如果有父节点，默认挂载到父节点，这样就不会滚动错乱。
但是全局配置以后发现有些还必须挂载到body上(比如toopTip)，这样我们就写到该组件上面。优先执行该组件的getPopupContainer

getPopupContainer={node:any => {
if (node) {
return node.parentNode;
}
return document.body;
}}

复制代码