Какой тип нужно указать для props, в которые приходит компонент?

Question

Есть компонент HOC, который принимает другой компонент. Подскажите пожалуйста какой тип нужно указать для такого пропса?

export const ShowModal = (Modal: React.Component) => {
  return () => {
    const [isModal, setModal] = React.useState<boolean>(false);
    const onClose = (): void => setModal(false);

    return (
      <div>
        <CustomButtonAdd onClick={() => setModal(true)}>
          <>Добавить</>
        </CustomButtonAdd>

        <div>
          <Modal onClose={onClose} visible={isModal} /> // Тип элемента JSX "Modal" не имеет конструкций или сигнатур вызова.
        </div>
      </div>
    );
  };
};

Answer 1

Проблему смог решить таким способом:

type Props = {
  onClose: () => void;
  visible: boolean;
};

export const ShowModal = (Modal: React.ComponentType<Props>) => {
  return () => {
    const [isModal, setModal] = React.useState<boolean>(false);
    const onClose = (): void => setModal(false);

    return (
      <div>
        <CustomButtonAdd onClick={() => setModal(true)}>
          <>Добавить</>
        </CustomButtonAdd>

        <div>
          <Modal onClose={onClose} visible={isModal} />
        </div>
      </div>
    );
  };
};

БЛОГ НА HUSL

Какой тип нужно указать для props, в которые приходит компонент?

Ответы (1 шт):