时间戳

首页 > 解决方案 > 如何调用位于另一个文件中且未导出的名为“toggleDrawer”的函数？

javascript - 如何调用位于另一个文件中且未导出的名为“toggleDrawer”的函数？

问题描述

我是新手，ReactJS我正在使用@material-ui 创建标题和边栏。

我有 2 个文件，Sidebar.js, Header.js.

在Header.js我有以下行：

 <IconButton onClick={toggleDrawer('left', true)} edge="start" className={classes.menuButton} color="inherit" aria-label="menu">

在Sidebar.js我有要导出的默认函数命名Sidebar并且在该函数中我有以下几行：

function Sidebar(props) { 
    const classes = useStyles();
    const [state, setState] = React.useState({
        left: false
    });

    const toggleDrawer = (side, open) => event => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [side]: open });
    };

如果我编译项目，我会收到以下错误：

  ./src/components/Header/index.js
  Line 25:42:  'toggleDrawer' is not defined  no-undef

我想这是因为我无法toggleDrawer通过文件访问该功能Header.js，但我不知道如何解决这个问题。

标签： javascriptreactjs

解决方案

如果不使用 context 或 redux，您将无法做到这一点，您基本上可以做的是创建一个文件 layout.js，然后从那里渲染组件标题和侧边栏，并在那里定义 toggleDrawer 函数并将其引用传递给两个组件

推荐阅读