Блог

У меня есть 2 компонента внутри шаблона, они получают {...args} , но в одном компоненте у меня есть то, что нужно href , а в другом я не хочу иметь href , поэтому в одном компоненте есть ссылка, в другом-текст.

Когда я вставляю другой компонент <DeliveryInfoComponent {...args} href="textLink" /> , свойство rooro show me «href» не существует в типе «Встроенные атрибуты и параметры доставки», но href находится в интерфейсе bottomTextProps .

.истории

 const Template: StoryType<DeliveryInfoProps> = (args) => (
  <>
    <DeliveryInfoComponent {...args} />
    <DeliveryInfoComponent {...args} href="textLink" />
  </>
);

export const DeliveryInfo = Template.bind({});

DeliveryInfo.args = {
  heading: 'heading4',
  body: 'body',
  bodyHeading: 'heading4',
  icon: <PostnlIcon />,
  bottomTextProps: {
    title: 'title',
    href: 'text',
  },
};
 

.tsx

 export interface DeliveryInfoProps {
  heading: string;
  body: string;
  bodyHeading: string;
  icon: ReactNode;
  bottomTextProps: {
    title: string;
    href?: string;
  };
}

const DeliveryInfo = ({ heading, body, bodyHeading, icon, bottomTextProps }: DeliveryInfoProps) => {
  const classes = useStyles();

  const { title, href } = bottomTextProps;

  const bottomContent = useMemo(() => {
    if (href) {
      return (
        <Text type="body" color="secondary" removeGutter href={href} component={NextComposed}>
          {title}
        </Text>
      );
    }
    return (
      <Text type="body" color="secondary" removeGutter>
        {title}
      </Text>
    );
  }, [href, title]);