上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 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框和选项分离问题
    image.png

    解决方案
    image.png

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

    lQLPJxbln4598eTNAcDNBMSwQcxOcBxrCvUDeUf0EwD0AA_1220_448.png

    lQLPJxbln6W81S7NAcTNBSywyD9padcViKQDeUgZqECJAA_1324_452.png

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

    image.png

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

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

    image.png

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

    image.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
    image.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

    image.png

    image.png
    image.png
    I frequently record, because want to leave something.
  • TA的每日心情
    开心
    21 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    434

    主题

    3868

    帖子

    3940

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3940

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-22 21:57:38 | 显示全部楼层
    接收的类型是一个HTMLElement类型
    他的parentNode类型是  readonly parentNode: ParentNode | null;
    所以函数类型是
    parentNode=》 ParentNode | null;
    要求函数类型是
    parentNode=》 ParentNode ;
    从集合来讲
    应该是参数协变,返回逆变
    而此时返回发生了协变行为
    所以说触发报错
    如果在保证parentNode有值的情况下搞个any就行

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

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 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;
        }}

    我感觉这个就应该不报错的,但是它还是报错了。搞不懂
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 2022-11-22 22:14:41 | 显示全部楼层
    wwwwwllllk 发表于 2022-11-22 22:12
    它报的那个提示好像就是存在没值得情况

    getPopupContainer={node => {

    return triggerNode!.parentNode  
    return triggerNode?.parentNode  

    这个当时也试过了
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    21 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    434

    主题

    3868

    帖子

    3940

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3940

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-22 22:25:54 | 显示全部楼层
    wwwwwllllk 发表于 2022-11-22 22:12
    它报的那个提示好像就是存在没值得情况

    getPopupContainer={node => {

    这个依然是一个协变
    getPopupContainer={node => {
            return node.parentNode??node;
        }}
    试一下
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 2022-11-22 22:44:17 | 显示全部楼层
    李恒道 发表于 2022-11-22 22:25
    这个依然是一个协变
    getPopupContainer={node => {
            return node.parentNode??node;

    结论:直接关闭ts的协变检测就可以   这个监测还能关,怎么关?
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    21 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    434

    主题

    3868

    帖子

    3940

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3940

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-22 23:02:58 | 显示全部楼层
    wwwwwllllk 发表于 2022-11-22 22:44
    结论:直接关闭ts的协变检测就可以   这个监测还能关,怎么关?

    在tsconfig里面
    具体可以参考ts配置项文档
    但是这个是全局的
    关了其他地方的协变检测也会关掉
    如果骚一点的方法
    你可以对ConfigProvide做一层封装,自己来做曾中间件来搞
    用的地方少的话就手动替换
    多的话就加层ast插件自动替换antd路径
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    21 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    434

    主题

    3868

    帖子

    3940

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3940

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-22 23:49:12 | 显示全部楼层
    wwwwwllllk 发表于 2022-11-22 22:44
    结论:直接关闭ts的协变检测就可以   这个监测还能关,怎么关?

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    21 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    434

    主题

    3868

    帖子

    3940

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3940

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-23 02:37:48 | 显示全部楼层
    我突然想起来不确定改配置是有用还是没用的,双变主要是针对的参数,返回值的特性我忘了。。。
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

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

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

    1. getPopupContainer={node:any => {
    2.           if (node) {
    3.             return node.parentNode;
    4.           }
    5.           return document.body;
    6.       }}
    复制代码
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表