Блог

У меня есть этот дочерний элемент нижнего колонтитула, которому в реквизитах передана функция отмены модального родителя, но он не будет выполнять функцию «handleCancel» родителя.

 const PageFooter = (props) =gt; { const { handleCancel} = props;  const modalStyleClass = useModalStyles(); return(  lt;footer className={modalStyleClass.modalFooter}gt;  lt;div className="container-fluid"gt;  lt;div className="row"gt;  lt;div className="col-sm-6"gt;  lt;/divgt;  lt;div className="col-sm-6 text-right"gt;  lt;button className={modalStyleClass.cancelButton}  onClick={handleCancel}gt;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/footergt; )}  export default PageFooter;  

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

 const [isModalShown, toggleModal] = React.useState(false);  

Общий «EditModal» в качестве родителя кода дочернего компонента нижнего колонтитула:

 export function GenericEditModal (props) {  const {isModalShown, title, closeModal, } = props;   const HandleCancel = () =gt; {  closeModal();  };   return (  lt;form gt;  lt;divgt;  lt;Modal  className={modalStyleClass.modal}  open={isModalShown}  closeModal={handleCloseModal}  onClose={handleCloseModal}  gt;  lt;div className={modalStyleClass.paper} style={{ top: '0px',padding:'0px', }} gt;  lt;ModalHeadergt;  handleCancel={HandleCancel}  lt;/ModalHeadergt;  { markup }  lt;/divgt;  lt;Footergt;  handleCancel={HandleCancel}  lt;/Footergt;  lt;/divgt;  lt;/Modalgt;  lt;/divgt;  lt;/formgt;  ); };  export const GenericEditModal = React.memo(GenericEditModal);  

Передайте ребенку вот так:

 lt;Footer handleCancel={HandleCancel}/gt;