【React】List使用QueueAnim动画效果不生效——QueueAnim与函数组件兼容性问题

版本

  • "antd-mobile": "^5.37.1",
  • "rc-queue-anim": "^2.0.0",

问题

在使用 QueueAnim 时,如果动画的子元素是 Ant Design Mobile 中的组件(如 List.Item),可能会遇到动画不生效的问题,并且会看到类似以下警告:

复制代码
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

原因

Ant Design Mobile 中的组件(如 List.Item)在新版v5中是函数组件,而 QueueAnim 使用 ref 来控制动画,但函数组件不能直接使用 ref,导致动画无法正常执行。


解决方法

  1. 使用 div 包裹组件

    因为 QueueAnim 需要将 key 放在最外层元素上,而且 div 能正常支持 ref,所以可以使用 div 包裹需要动画的组件(例如 List.Item),并将 key 放在 div 上。

  2. 代码更新

    你只需要在 div 上设置 key,并且确保 QueueAnim 的动画应用在 div 上,而不是直接应用在 List.Item 上。

代码示例

jsx 复制代码
import React from 'react';
import { List } from 'antd-mobile';
import QueueAnim from 'rc-queue-anim';

function Chat({ msgs }) {
  return (
    <QueueAnim type="left" delay={100}>
      {/* 只在 div 上设置 key,包裹 List.Item */}
      {msgs.map((msg) => (
        <div key={msg._id}>
          <List.Item>
            {msg.content}
          </List.Item>
        </div>
      ))}
    </QueueAnim>
  );
}

export default Chat;

总结

  • 函数组件不支持 ref :新版的 Ant Design Mobile 组件(如 List.Item)是函数组件,它们不能直接使用 ref,导致 QueueAnim 动画效果无法生效。
  • 使用 div 包裹 :通过将 List.Item 组件包裹在 div 元素内,并在 div 上添加 key,可以避免上述问题,并使动画正常工作。
相关推荐
灵感__idea40 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript