a64654612 2023-02-16 14:10 采纳率: 88%
浏览 31
已结题

使用antd-Cascader时,选择后展示的渲染函数render了很多遍

使用antd-Cascader时,需求是选择后展示的渲染函数和option里的不一样,
所以使用了tagRender,但是在项目中render了很多遍,
请教一下有没有什么解决办法,搜了一下没有看到关于这个问题的解决办法。
<Cascader
                multiple
                options={options}
                showCheckedStrategy={SHOW_CHILD}
                getPopupContainer={trigger => trigger.parentNode}
                tagRender={
                  () => {
                    return 111111;   //页面会return出来三个111111
                  }
                }
                
              />
  • 写回答

2条回答 默认 最新

  • zmy1127 2023-02-16 18:55
    关注

    如果 tagRender 函数被调用多次,可能是由于每次选中一个选项都会重新渲染 Cascader 组件导致的。为了避免这种情况,你可以使用 memo 函数(或者使用 React.memo)将 tagRender 函数进行包装,从而减少渲染次数。

    下面是一个使用 memo 函数包装 tagRender 的例子:

    
    import { memo } from 'react';
    import { Cascader } from 'antd';
    
    const MyCascader = memo(({ options }) => {
      const tagRender = () => {
        return 111111;
      };
    
      return (
        <Cascader
          multiple
          options={options}
          showCheckedStrategy={SHOW_CHILD}
          getPopupContainer={trigger => trigger.parentNode}
          tagRender={tagRender}
        />
      );
    });
    
    export default MyCascader;
    
    

    在这个例子中,MyCascader 组件被包装在 memo 函数中,它接收一个 options 属性作为数据源,并将 tagRender 函数传递给 Cascader 组件。由于 MyCascader 组件只有在 options 属性改变时才会重新渲染,tagRender 函数也只会被调用一次,从而避免了重复渲染。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月25日
  • 已采纳回答 2月17日
  • 修改了问题 2月16日
  • 修改了问题 2月16日
  • 展开全部

悬赏问题

  • ¥15 华为ensp使用基本ACL限制公司网络访问
  • ¥15 帮我做下照片上的PLC题
  • ¥15 labview2022 使用modbus报缺少依赖?
  • ¥15 谷歌地图是不是不开通结算功能,api会使用不了哦
  • ¥15 unity腾讯云对象存储机型适配
  • ¥15 求全国交通咨询模拟代码,要求如下,可以完全在dev c++运行
  • ¥15 根据要求修改程序编码
  • ¥15 用 Python 做一个用 Excel 表导入的答题系统
  • ¥15 使用微信开发者工具实现一个“婚博会”小程序
  • ¥15 ros的rviz仿真机器人