Question

我创建了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;
`;

Answer 1

我希望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 */
`;

此答案基于所提供代码的假设。

我是否需要传递className属性来扩展组件的样式？

1 个答案: