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

Question

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

Answer 1

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