使用ant-design使用select或者popconfirm页面滚动, select框和选项...
本帖最后由 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框和选项分离问题
!(data/attachment/forum/202211/22/204726fyaf0ytwf1wswtr2.png)
解决方案
!(data/attachment/forum/202211/22/210105rzl7llmlm7zecd79.png)
我会写第三种是因为ts中前两种会报一下错误，不管我怎么改，它就是报如下报错(希望有大佬解答)
!(data/attachment/forum/202211/22/210220k2ffflyfbdoaphxt.png)
!(data/attachment/forum/202211/22/210257gddld27wswrvqpwf.png)
但是我们的项目中写了好多，一个一个的改有点麻烦，能不能全局改呢，antd-design也给了解决方法。我们在最外层加上即可
!(data/attachment/forum/202211/22/210427qwnrern2ep7kclcc.png)
官方地址：https://ant.design/components/config-provider-cn
ts里面这样写我还没试，不知道会不会报错。但是上面的写法会导致modal报错我们得这样写。
!(data/attachment/forum/202211/22/210642t3bmkmnbnkm34bzc.png)
issue:https://github.com/ant-design/ant-design/issues/19974
!(data/attachment/forum/202211/22/210816q0xcnpp20p7z50z3.png)
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
!(data/attachment/forum/202211/22/211318hdt65f51mfblfdvl.png)
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
!(data/attachment/forum/202211/22/211734wirdicr5ruzunval.png)
接收的类型是一个HTMLElement类型
他的parentNode类型是readonly parentNode: ParentNode | null;
所以函数类型是
parentNode=》 ParentNode | null;
要求函数类型是
parentNode=》 ParentNode ;
从集合来讲
应该是参数协变，返回逆变
而此时返回发生了协变行为
所以说触发报错
如果在保证parentNode有值的情况下搞个any就行
ts低版本没报错应该是因为低版本是双变得原因
结论：直接关闭ts的协变检测就可以
李恒道 发表于 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:12
它报的那个提示好像就是存在没值得情况
getPopupContainer={node => {
return triggerNode!.parentNode
return triggerNode?.parentNode
这个当时也试过了 wwwwwllllk 发表于 2022-11-22 22:12
它报的那个提示好像就是存在没值得情况
getPopupContainer={node => {
这个依然是一个协变
getPopupContainer={node => {
return node.parentNode??node;
}}
试一下 李恒道 发表于 2022-11-22 22:25
这个依然是一个协变
getPopupContainer={node => {
return node.parentNode??node;
结论：直接关闭ts的协变检测就可以 这个监测还能关，怎么关？
wwwwwllllk 发表于 2022-11-22 22:44
结论：直接关闭ts的协变检测就可以 这个监测还能关，怎么关？
在tsconfig里面
具体可以参考ts配置项文档
但是这个是全局的
关了其他地方的协变检测也会关掉
如果骚一点的方法
你可以对ConfigProvide做一层封装，自己来做曾中间件来搞
用的地方少的话就手动替换
多的话就加层ast插件自动替换antd路径 wwwwwllllk 发表于 2022-11-22 22:44
结论：直接关闭ts的协变检测就可以 这个监测还能关，怎么关？
getPopupContainer={node => {
return node.parentNode??node;
}}
话说这个是不是能解决错误
如果是的话就是协变问题
我对着代码虚空输出的...
我突然想起来不确定改配置是有用还是没用的，双变主要是针对的参数，返回值的特性我忘了。。。 李恒道 发表于 2022-11-22 23:02
在tsconfig里面
具体可以参考ts配置项文档
但是这个是全局的
直接node:any完美解决
补充：这样了些了以后的意思就是如果有父节点，默认挂载到父节点，这样就不会滚动错乱。
但是全局配置以后发现有些还必须挂载到body上(比如toopTip)，这样我们就写到该组件上面。优先执行该组件的getPopupContainer
getPopupContainer={node:any => {
if (node) {
return node.parentNode;
}
return document.body;
}}
页:
[1]
2