使用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 函数也只会被调用一次,从而避免了重复渲染。
源数据是不是异步更新了很多遍