我创建了Card组件,并希望通过扩展对其进行修改。
但是为了做到这一点,我需要传递一个名为className
的道具,例如下面的代码。
import React from 'react';
import { CardStyle } from './style';
import { CardInterface } from './interface';
const Card = (props: CardInterface) => {
const { children, className } = props;
return (
<CardStyle className={className}>
{children}
</CardStyle>
);
};
export default Card;
我的问题是,没有其他方法可以不需要将className
道具传递给组件来扩展它了吗?
我尝试扩展Card
的代码段。
export const CardWithTabs = styled(Card)`
border-radius: 0px;
`;
答案 0 :(得分:0)
我希望import { CardInterface } from './interface';
看起来像这样:
export interface CardInterface {
className: string;
}
因此,如果const Card = (props: CardInterface)
,则在扩展CardWithTabs = styled(Card)
时,CardWithTabs
将继承CardInterface
并且还需要className
。
<CardWithTabs className="bleh" />
要不需要className
,可以在className
中使用interface
将?
设置为可选:
export interface CardInterface {
className?: string;
}
或者,在扩展Card
时,不要传递className
道具:
// You will need to add an interface for CardComponent of course
const CardComponent = ({
children,
className,
...rest
}) => <Card {...rest}>{children}</Card>;
const CardWithTabs = styled(CardComponent)`
/* Your styles */
`;
此答案基于所提供代码的假设。