Reactjs 如何使react组件从另一个Material UI Typescript调用函数

有两个组件：抽屉和应用程序栏。应用程序栏有一个菜单按钮，它必须触发一个打开抽屉的事件，我被困在如何实现这一点上，我试图将按钮中的“onClick={toggleDrawer（'left'，true）}”行添加到顶部栏中的IconButton中，但出现了错误。如何向顶部栏说明“toggleDrawer”是MyDrawer的一个函数

MyDrawer.tsx

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
export default function MyDrawer() {
    const classes = useStyles();
    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });
    type DrawerSide = 'top' | 'left' | 'bottom' | 'right';
    const toggleDrawer = (side: DrawerSide, open: boolean) => (
        event: React.KeyboardEvent | React.MouseEvent,
    ) => {
        if (
            event.type === 'keydown' &&
                ((event as React.KeyboardEvent).key === 'Tab' ||
                (event as React.KeyboardEvent).key === 'Shift')
            ) {
        return;
    }
    setState({ ...state, [side]: open });
    }; 
//drawer list of links
    return (
            <div>
                {/* <Button onClick={toggleDrawer('left', true)}>Open Left</Button>  */}          
                <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
                    {sideList('left')}
                </Drawer>            
            </div>
        );

从“React”导入React；
从“@material ui/core/Drawer”导入抽屉；
导出默认函数MyDrawer（）{
const classes=useStyles（）；
常量[状态，设置状态]=React.useState({
上图：错，
左：错，
底部：错误，
右：错，
});
类型DrawerSide='top'|'left'|'bottom'|'right'；
const-toggleDrawer=（边：DrawerSide，开：布尔）=>(
事件：React.KeyboardEvent | React.MouseEvent，
) => {
如果(
event.type==='keydown'&&
（（事件作为React.KeyboardEvent.key=='Tab'||
（事件为React.KeyboardEvent）。键=='Shift'）
) {
返回；
}
设置状态（{…状态，[侧]：打开}）；
}; 
//链接列表
返回(
{/*左开*/}
{sideList（'left'）}
);

TopBar.tsx

import MyDrawer from '../Drawer/Drawer'
export default function TopBar() {
const renderDrawer = (
    <OlimpoDrawer/>
  );
return (
    <div className={classes.grow}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="abrir menu"
          >
            <MenuIcon />
          </IconButton>
//Toolbar features
</Toolbar>
      </AppBar>      
      {renderDrawer}
    </div>
  );
}

<div className={classes.grow}>
      <AppBar position="static">      
        <Toolbar>
          <MyDrawer/>
          {/* <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="abrir menu"            
          >
            <MenuIcon />
          </IconButton> */}

从“../Drawer/Drawer”导入MyDrawer
导出默认函数TopBar（）{
常数renderDrawer=(
);
返回(
//工具栏功能
{renderDrawer}
);
}

让我理解你的问题。你想让

图标按钮

做与

按钮

相同的事情，在

我的抽屉

中注释

如果这是您想要的。您应该创建函数，并将其从

TopBar

传递到

MyDrawer

toggleDrawer

中，该函数应该在

TopBar

中定义，然后将其放入您已注释的

IconButton

和

按钮的
onClick

     setState(preState => ({ ...preState, [side]: open }));

注意：
setState
这样比较好

如何使react组件从另一个Material UI Typescript调用函数

由于
toggleDrawer
依赖于
setState
，它只在
MyDrawer
功能组件内起作用，因此它需要留在
toggleDrawer
内，因此无法执行类似
导出TopBar
的操作，以便直接使用
TopBar
的功能

如果您只需要在某个地方存储打开的状态，并让其他组件共享回调函数，那么我建议使用更高的组件（它们都共享）或Redux来存储
MyDrawer
的打开状态。
最后，我想更多的是“开箱即用”的方式，并使之最简单

在MyDrawer.tsx中，我更改了渲染，创建了一个菜单按钮，就像抽屉按钮一样

return (
        <div>
            <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="abrir menu"
            onClick={toggleDrawer('left', true)}
            > 
                <MenuIcon />
            </IconButton>            
            <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
                {sideList('left')}
            </Drawer>            
        </div>
    );
}

返回(
{sideList（'left'）}
);
}

在TopBar.tsx中

import MyDrawer from '../Drawer/Drawer'
export default function TopBar() {
const renderDrawer = (
    <OlimpoDrawer/>
  );
return (
    <div className={classes.grow}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="abrir menu"
          >
            <MenuIcon />
          </IconButton>
//Toolbar features
</Toolbar>
      </AppBar>      
      {renderDrawer}
    </div>
  );
}

<div className={classes.grow}>
      <AppBar position="static">      
        <Toolbar>
          <MyDrawer/>
          {/* <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="abrir menu"            
          >
            <MenuIcon />
          </IconButton> */}


{/* 
*/}
这假设
MyDrawer
是
TopBar
的后代，因此您可以将
toggleDrawer
从
TopBar
向下传递到
MyDrawer
，如果是这样的话@吳約南 记住了。谢谢@stackoverflow新手改进我的句子。