使用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 函数也只会被调用一次,从而避免了重复渲染。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 高价求中通快递查询接口
- ¥15 解决一个加好友限制问题 或者有好的方案
- ¥15 关于#java#的问题,请各位专家解答!
- ¥15 急matlab编程仿真二阶震荡系统
- ¥20 TEC-9的数据通路实验
- ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
- ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
- ¥15 python如何将动态的多个子列表,拼接后进行集合的交集
- ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
- ¥15 如何实现H5在QQ平台上的二次分享卡片效果?