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

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

如果 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 函数也只会被调用一次,从而避免了重复渲染。

源数据是不是异步更新了很多遍