Javascript 从函数内部从另一个函数调用处理程序

我不知道最好的方法是什么，或者是否可能，但我有

2

组件；一个主

导航栏

，穿过页面顶部，一个侧栏

抽屉

导航栏：

    export default function NavBar() {
  const classes = useStyles();

  return (
    <AppBar position="fixed" color="transparent" style={{boxShadow: "none"}}>
              <Toolbar>
                <IconButton edge="start" className={classes.menuButton} style={{color:"#ee6a2c"}} aria-label="menu" onClick={SideBar.handleDrawerOpen()}>
                  <MenuIcon />
                </IconButton>
              </Toolbar>
            </AppBar>
  );
}

export default function NavBar(props) {
  const classes = useStyles();

  return (
    <AppBar position="fixed" color="transparent" style={{boxShadow: "none"}}>
      <Toolbar>
        <IconButton edge="start" className={classes.menuButton} style={{color:"#ee6a2c"}} aria-label="menu" onClick={props.toggleDrawer}>
          <MenuIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  );
}

问题是，我不知道如何传递侧栏中的函数，以便在

NavBar

中访问。这两个组件都将是一个更大主页的一部分，那么在从这两个主页重构代码的同时，是否有更好的方法来实现这一点？

Update Added Sample code Sandbox

这更像是一个基于观点的问题

一种方法是

理想情况下，您不应该在

侧栏中有状态。您应该只传递一个道具，如
visible
，它将控制
侧栏是否打开抽屉

然后，您可以再次使用类似
onClick={this.props.handleDrawerClose}
的道具，而不是执行
onClick={this.props.handleDrawerClose}
，该道具将在父组件内设置
可见
的状态，并且该
可见
将再次传递给道具，如前所述

这将使您的
侧栏
完全可以从您的
父组件
控制，该组件也将
导航栏
作为其子组件。
对于任何感兴趣的人，以下是使其工作的代码：

家长：

export default function Home() {
  const classes = useStyles();
  const [drawerVisible, setDrawerVisible] = React.useState(false);

  const toggleDrawer = () => {
    setDrawerVisible(!drawerVisible);
  };

  const onDrawerClose = () => {
    setDrawerVisible(false);
  };

  return (
        <ThemeProvider theme={theme}>
          <Paper className={classes.backgroundPaper} style={{minHeight: "70vh"}} square="true">
            <NavBar toggleDrawer={toggleDrawer}></NavBar>
//...

导出默认函数Home（）{
const classes=useStyles（）；
const[drawerVisible，setDrawerVisible]=React.useState（false）；
常量切换抽屉=（）=>{
SetDroperVisible（！DroperVisible）；
};
const onDrawerClose=（）=>{
setDrawerVisible（假）；
};
返回(
//...

导航栏：

    export default function NavBar() {
  const classes = useStyles();

  return (
    <AppBar position="fixed" color="transparent" style={{boxShadow: "none"}}>
              <Toolbar>
                <IconButton edge="start" className={classes.menuButton} style={{color:"#ee6a2c"}} aria-label="menu" onClick={SideBar.handleDrawerOpen()}>
                  <MenuIcon />
                </IconButton>
              </Toolbar>
            </AppBar>
  );
}

export default function NavBar(props) {
  const classes = useStyles();

  return (
    <AppBar position="fixed" color="transparent" style={{boxShadow: "none"}}>
      <Toolbar>
        <IconButton edge="start" className={classes.menuButton} style={{color:"#ee6a2c"}} aria-label="menu" onClick={props.toggleDrawer}>
          <MenuIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  );
}

导出默认功能导航栏（道具）{
const classes=useStyles（）；
返回(
);
}

侧栏：

export default function SideBar() {

    const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    const handleDrawerOpen = () => {
        setOpen(true);
      };
    
      const handleDrawerClose = () => {
        setOpen(false);
      };

    return (
        
        <Drawer
              className={classes.drawer}
              variant="persistent"
              anchor="left"
              open={open}
              classes={{
                paper: classes.drawerPaper,
              }}>
              <div className={classes.drawerHeader}>
                <IconButton onClick={handleDrawerClose}>
                  {theme.direction === 'ltr' ? <ChevronLeftIcon className={classes.drawerIcon}/> : <ChevronRightIcon className={classes.drawerIcon}/>}
                </IconButton>
              </div>

            </Drawer>
    )
}

export default function SideBar(props) {

    const classes = useStyles();
    
    return (      
        <Drawer
              className={classes.drawer}
              variant="persistent"
              anchor="left"
              open={props.visible}
              classes={{
                paper: classes.drawerPaper,
              }}>
              <div className={classes.drawerHeader}>
                <IconButton onClick={props.onDrawerClose}>
                  {theme.direction === 'ltr' ? <ChevronLeftIcon className={classes.drawerIcon}/> : <ChevronRightIcon className={classes.drawerIcon}/>}
                </IconButton>
              </div>

            </Drawer>
    );
}

导出默认功能边栏（道具）{
const classes=useStyles（）；
报税表（
{theme.direction=='ltr'？：}
);
}
如果我在侧边栏中有一个按钮将其关闭，我如何将更改传递回父级？
其中
handleDrawerClose
是来自父级的函数类型道具，您将在其中设置父级的状态为
可见：false
如果您仍然不清楚，我可以提供一个代码sanbox。是的，请：）。我没有使用类，所以不确定我应该如何使用
this
关键字。哦，糟糕。你不应该使用这个。你必须在
侧边栏
函数中使用道具，比如导出默认函数侧边栏（道具）{
然后像这样使用
。这是否消除了疑问，或者您希望我编写一个基本示例？