React Kendo组件点击事件需双击触发的问题求助

问题场景 #

• 在Kendo UI for React的PanelBar组件内部嵌套自定义ParentComponent渲染Grid组件
• 点击Grid中ID列的“Click”单元格时，必须双击才能触发onClick回调输出“test”；替换为react-router-dom的Link组件时，同样存在双击才生效的问题
• 使用useCallback包裹回调函数后，问题直接解决，下面解释背后的原因

核心原因 #

这是React组件重渲染导致回调引用变化，触发Kendo Grid单元格重新挂载引发的问题：

1. 没加useCallback时，每次ParentComponent重渲染（比如PanelBar展开折叠、Grid数据更新等场景），都会生成一个全新的onClick函数实例
2. Kendo UI的Grid组件会监听列模板中元素的属性变化，当发现回调函数的引用变了，就会重新渲染对应的单元格元素——也就是先卸载旧元素，再挂载新元素
3. 第一次点击的时候，其实是Grid在完成元素的重新挂载操作，并没有真正触发点击回调；第二次点击才是作用在已经稳定挂载的新元素上，自然就能触发回调了
4. 而useCallback的作用就是缓存函数引用，让组件每次重渲染时，回调函数的引用都保持一致。Grid检测不到回调的变化，就不会重新渲染单元格，第一次点击就能直接触发回调

额外补充：Kendo Grid的列模板在处理子元素props变化时，采用的是卸载再重新挂载的逻辑，不是常规的props更新，这也是为什么第一次点击会看起来“无效”的关键——它在处理组件更新，不是响应点击。

内容的提问来源于stack exchange，提问作者Giang Vu