0

Есть компонент 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>
    );
  };
};
2
  • Modal: React.ComponentType
    – Grundy
    19 авг 2021 в 15:33
  • Да, проблема ушла спасибо! Но теперь он начал ругаться на пропсы в Modal Тип "{ onClose: () => void; visible: boolean; }" не может быть назначен для типа "IntrinsicAttributes & { children?: ReactNode; }". Свойство "onClose" не существует в типе "IntrinsicAttributes & { children?: ReactNode; }".
    – hokies
    19 авг 2021 в 17:49

1 ответ 1

0

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

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>
    );
  };
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.