Блог

У меня есть пользовательский раскрывающийся компонент, подобный этому:

 class Dropdown extends Component<DropdownProps, DropdownState> {
 ...
}
  

Однако в этом выпадающем классе DropdownProps не объявлял className в интерфейсе.

Теперь я пишу оболочку для этого выпадающего компонента

 import { Dropdown as Component } from "dropdown";
import { DropdownProps as ComponentProps } from "dropdown";
import cx from "classnames";

type DropdownProps = ComponentProps amp; {
  className: string;
};

const DropdownWrapper: React.FC<DropdownProps> = props => {
  const { className, children } = props;

  return <Component {...props} className={cx(className)} />;
};
  

Однако он по-прежнему показывает ошибку, потому что возврат Component в оболочке не принимает новые реквизиты className .

В любом случае я могу добавить className к propsList оболочке без необходимости изменять оригинал dropdown .

Спасибо

Лучшей идеей было бы просто определить необязательный className реквизит для вашего Dropdown компонента. Но если вы не можете и нуждаетесь в этом компоненте-оболочке, вам следует создать новый интерфейс props, аналогичный интерфейсу extends исходного компонента:

 export interface DropdownWrapperProps extends DropdownProps {
  className: string
}
  

Затем, чтобы исправить ошибку TypeScript, вам нужно извлечь className из реквизита. Вы можете легко добиться этого с помощью деструктурирования объекта. И, наконец, добавьте a div , чтобы обернуть ваш компонент нужным классом:

 const DropdownWrapper: React.FC<DropdownWrapperProps> = props => {
  const { className, children, ...rest } = props; // rest is equal to props without 'className' and 'children'

  return (
    <div className={cx(className)}>
      <Component {...rest} />
    </div>
  );
};