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>
This commit is contained in:
Long Hao (龙濠) 2022-01-20 18:05:36 +08:00 committed by GitHub
parent 222d1b7095
commit 3c76de74ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 4 deletions

View File

@ -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);
});
});

View File

@ -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;