From 3c76de74cef138684a708fcf671ca232e59c3294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Long=20Hao=20=28=E9=BE=99=E6=BF=A0=29?=
 <45565100+LongHaoo@users.noreply.github.com>
Date: Thu, 20 Jan 2022 18:05:36 +0800
Subject: [PATCH] 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 | 18 ++++++++++++++++++
 components/card/index.tsx               |  8 ++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/card/__tests__/index.test.js b/components/card/__tests__/index.test.js
index 8e1cade399..da9a0979c0 100644
--- a/components/card/__tests__/index.test.js
+++ b/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);
+  });
 });
diff --git a/components/card/index.tsx b/components/card/index.tsx
index 983eb92c89..b4b39ac0db 100644
--- a/components/card/index.tsx
+++ b/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;