反应子组件不执行功能父组件功能答案

【问题标题】：React child component not executing functional parent component function反应子组件不执行功能父组件功能
【发布时间】：2021-11-29 13:18:46
【问题描述】：

我有这个Footer子，它在props中传递了Modal父级的取消函数，但它不会执行父级的“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);

【问题讨论】：

您能否记录下道具，以确保道具按预期通过。这让我们可以判断是调用错误还是缺少函数错误。

标签： reactjs react-hooks react-props

【解决方案1】：

像这样传递给孩子：

<Footer handleCancel={HandleCancel}/>

【讨论】：