当前位置：首页 > article >正文

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

article 2025/3/27 23:38:30

版本：

“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，导致动画无法正常执行。

解决方法

使用 div 包裹组件：
因为 QueueAnim 需要将 key 放在最外层元素上，而且 div 能正常支持 ref，所以可以使用 div 包裹需要动画的组件（例如 List.Item），并将 key 放在 div 上。
代码更新：
你只需要在 div 上设置 key，并且确保 QueueAnim 的动画应用在 div 上，而不是直接应用在 List.Item 上。

代码示例

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，可以避免上述问题，并使动画正常工作。