Передайте Компонент с подпорками внутри Компонента Высшего Порядка (HO C)

Question

Я ссылаюсь на этот пример создания React компонента высшего порядка, взятого из этой статьи .

Я изо всех сил пытаюсь полностью понять и использовать этот HO C.

interface PopupOnHoverPropType {
  hoverDisplay: string;
}

const WithPopupOnHover = <P extends object>(BaseComponent: React.FC<P>): React.FC<P & PopupOnHoverPropType> => ({ hoverDisplay, ...props }: PopupOnHoverPropType) => {

  const [displayMsg, setDisplayMsg] = useState<boolean>(false);
  const toggleDisplayMsg = () => {
    setDisplayMsg(displayMsg);
  };
  return (
    <div onMouseEnter={() => setDisplayMsg(true)}>
      <div className={`${hoverDisplay} popup`} onClick={toggleDisplayMsg}/>
      <BaseComponent {...props as P} />
    </div>
  )
};

Вот мое понимание приведенного выше кода:

Мы определяем HO C именем WithPopupOnHover, которое принимает компонент React (BaseComponent). BaseComponent поставляется со своими реквизитами (называемыми P), которые возвращают новый компонент React, который принимает реквизиты P & реквизиты в пределах PopupOnHoverPropType.

Как мне использовать этот HO C? Следующая попытка дает ошибку машинописного текста, в которой передается слишком много аргументов:

  const enhanced = WithPopupOnHover(Modal);
  const m = Enhanced(a,b,c, "up");

Компонент Modal React имеет следующую структуру реквизита:

const Modal: React.FC<{
  a: string;
  b(): void;
  c(locationData: customType): void;
}> = { ... }

Answer 1

Похоже, вы просто забыли скобки объектов. Все компоненты React принимают один аргумент объекта props.

const Enhanced = WithPopupOnHover(Modal);
const m = Enhanced({ a, b, c });