fix: Get ref of Card component #33730 (#33784)

* fix: Get ref of Card component #33730

* add test to the card ref

Co-authored-by: zengguhao.zgh <zengguhao.zgh@alibaba-inc.com>

components/card/__tests__/index.test.js

@@ -82,4 +82,22 @@ describe('Card', () => {
     );
     expect(wrapper.find('Tabs').get(0).props.size).toBe('small');
   });
+
+  it('get ref of card', () => {
+    class WrapperComponent extends React.Component {
+      render() {
+        return (
+          <Card
+            // eslint-disable-next-line react/no-string-refs
+            ref="firstRef"
+            title="Card title"
+          >
+            <p>Card content</p>
+          </Card>
+        );
+      }
+    }
+    const wrapper = mount(<WrapperComponent />);
+    expect(wrapper.ref('firstRef').className.includes('ant-card')).toBe(true);
+  });
 });

components/card/index.tsx

@@ -56,12 +56,12 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   tabProps?: TabsProps;
 }
 
-export interface CardInterface extends React.FC<CardProps> {
+export interface CardInterface extends React.ForwardRefExoticComponent<CardProps> {
   Grid: typeof Grid;
   Meta: typeof Meta;
 }
 
-const Card: CardInterface = props => {
+const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
 
@@ -196,14 +196,14 @@ const Card: CardInterface = props => {
   );
 
   return (
-    <div {...divProps} className={classString}>
+    <div ref={ref} {...divProps} className={classString}>
       {head}
       {coverDom}
       {body}
       {actionDom}
     </div>
   );
-};
+}) as CardInterface;
 
 Card.Grid = Grid;
 Card.Meta = Meta;