mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
* 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:
parent
222d1b7095
commit
3c76de74ce
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user