React TS中传递的箭头函数在内部函数中未触发问题

1. 核心问题：未执行closeMenu函数 #

你在redirectUser里只写了props.closeMenu，这只是引用了函数本身，没有触发执行。要让函数生效，必须加上括号调用它：

修改redirectUser函数：

function redirectUser(event: MouseEvent, url: string): void {
    navigate(url);
    // 调用closeMenu，传递event参数（匹配当前定义的MouseEventHandler类型）
    props.closeMenu(event);
}

2. 优化Props类型（可选但推荐） #

父组件的closeMobileMenu是无参函数，但子组件Props里定义的closeMenu是MouseEventHandler<HTMLDivElement>，两者类型其实不匹配（MouseEventHandler要求接收一个MouseEvent参数）。虽然当前没报错，但长期使用容易引发类型问题，建议修正：

子组件Props调整： #

interface Props {
    // 改成无参函数类型，贴合实际使用场景
    closeMenu: () => void;
}

父组件无需修改，直接沿用原closeMobileMenu即可 #

之后在redirectUser里直接调用，不用传event参数：

function redirectUser(event: MouseEvent, url: string): void {
    navigate(url);
    props.closeMenu();
}

完成以上修改后，点击按钮跳转页面的同时，移动端菜单会正常关闭。

内容的提问来源于stack exchange，提问作者Mat