Reactjs的導出函數，未定義的function錯誤[Reactjs + Material UI]

Question

我正在使用 Reactjs 和 Material UI 制作一個自適應菜單，我已經完成了所有操作，但是當我嘗試在不同的文件中導入定義的 const 時，不幸的是函數不起作用。

function的定義：

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';

這是我在主文件中聲明 function 的代碼部分

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

元素聲明：

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

錯誤是：

TypeError: setOpenDrawer is not a function

Answer 1

我將使用一點 typescript 來解釋這一點。

您期望的道具如下所示：

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}
/>

我也會考慮看看你的其他道具，你還沒有發布你的整個代碼（所以我不能說），但它們也可能不正確。