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

使用antd-Cascader时,选择后展示的渲染函数render了很多遍
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
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 函数也只会被调用一次,从而避免了重复渲染。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报