Reactjs导出函数，未定义函数报错【Reactjs + Material UI】

Question

我正在使用 Reactjs 和 Material UI 制作一个自适应菜单，我已经完成了所有操作，但是当我尝试导入时 在不同的文件中定义了一个常量，不幸的是函数不起作用。

函数定义：

export const Adapting = ({
     openDrawer,
     setOpenDrawer,
}) => {
     const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
     const classes = useStyles();
     return(
         <React.Fragment>
             <SwipeableDrawer 
                 disableDiscovery = {iOS}
                 disableBackdropTransition = {!iOS}

                 open = {openDrawer}
                 onOpen  = {() => setOpenDrawer(true)}
                 onClose = {() => setOpenDrawer(false)}

                 className = {classes.__adaptivemenu__}
             >
                 <h2>Example Of Adaptation</h2>
             </SwipeableDrawer>
             <IconButton
                 disableRipple
                 onClick = {() => setOpenDrawer(!openDrawer)}
             >
                 <MenuIcon />
             </IconButton>
         </React.Fragment>
     );  
}

导入组件

import {Adapting} from './Adaptives';

这是我在主文件中声明函数的代码部分

const [openDrawer, setOpenDrawer] = useState(false);

元素声明：

     {match ? 
         <Adapting
             open    = {openDrawer}
             onClick = {!openDrawer}
             onClose = {setOpenDrawer}
             onOpen  = {setOpenDrawer}
         /> 
     : qtabs}

错误是：

TypeError: setOpenDrawer is not a function

Answer 1

我将使用一些打字稿来解释这一点。

您所期待的道具如下所示：

interface Props {
  openDrawer: boolean; // I'm not sure about this one
  setOpenDrawer(open: boolean): void;
}

你实际上给了它什么：

interface Props {
  open: boolean; // Again I'm not sure about this
  onClose(): void;
  onOpen(): void;
}

因此您必须将组件的用法更改为：

<Adapting>
  openDrawer={openDrawer}
  setDrawerOpen={setDrawerOpen}
/>

我也会考虑看看你的其他道具，你还没有发布你的整个代码（所以我不能说），但它们也可能不正确。