反应子组件不执行功能性父组件功能

Question

我有这个 Footer child，它在 props 中传递给它的 Modal parent 的取消函数，但它不会执行 parent 的“handleCancel”函数。

const PageFooter = (props)  => {
const { handleCancel} = props;

const modalStyleClass = useModalStyles();
return(
    <footer className={modalStyleClass.modalFooter}>
        <div className="container-fluid">
            <div className="row">
                <div className="col-sm-6">
                </div>
                <div className="col-sm-6 text-right">
                        <button className={modalStyleClass.cancelButton}
                                onClick={handleCancel}>
                        </button>
                </div>
            </div>
        </div>
    </footer>
)}

export default PageFooter;

通用编辑模态父组件从调用它的任何其他父组件获取它的道具：该父组件实现模态的状态与

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

通用 'EditModal' 作为子页脚组件代码的父级：

export function GenericEditModal (props) {
    const {isModalShown, title, closeModal, } = props;

    const HandleCancel = () => {
        closeModal();
    };

   return (
    <form >
        <div>
            <Modal
                className={modalStyleClass.modal}
                open={isModalShown}
                closeModal={handleCloseModal}
                onClose={handleCloseModal}
            >
               <div className={modalStyleClass.paper} style={{ top: '0px',padding:'0px', }}  >
                    <ModalHeader>
                        handleCancel={HandleCancel}
                    </ModalHeader>
                       { markup }
                    </div>
                    <Footer>
                        handleCancel={HandleCancel}
                    </Footer>
               </div>
            </Modal>
        </div>
    </form>
   );
};

export const GenericEditModal = React.memo(GenericEditModal);

Answer 1

像这样传递给 child：

<Footer handleCancel={HandleCancel}/>

反应子组件不执行功能性父组件功能

React child component not executing functional parent component function

reactjs

react-props

react-hooks