Javascript 当父组件和子组件都是功能组件时，如何将函数作为道具传递？

我有一个

ParentComponent

，我想把一个名为

toggleDrawer

的函数传递给

ChildComponent

，如下所示：

const ParentComponent = () {
     
   const [drawerState, setDrawerState] = useState(false);

   const toggleDrawer = (anchor, open) => {
        setDrawerState(open);
   }

  return(
       <div>
         <IconButton color="primary"                         
                     onClick={toggleDrawer("right", true)}> // here I called to toggleDrawer so the ChildComponent can be shown 
             <SomeIcon />
         </IconButton>
         
        <ChildComponent 
             anchor="right"
             open={drawerState}
             handleDrawerState={toggleDrawer}/> 

        </div>
  )
}

const CartDrawer = (props) => {

 // other stuff at the top 

 return(
    <Drawer
      anchor={props.anchor}
      open={props.open}
      onClose={props.handleDrawerState(props.anchor, false)}
    >
  )
}

如您所见，我通过访问

道具
在
ChildComponent
中获取
handleDrawerState
。但我得到的是：

TypeError:props.handleDrawerState不是函数

我在下面尝试过，也得到了同样的结果：

const {handleDrawerState} = props

 <Drawer
       ... other stuff 
   onClose={handleDrawerState(props.anchor, false)}
>

我得到如下错误：

const ParentComponent = () {
     
   const [drawerState, setDrawerState] = useState(false);

   const toggleDrawer = (anchor, open) => {
        setDrawerState(open);
   }

  return(
       <div>
         <IconButton color="primary"                         
                     onClick={toggleDrawer("right", true)}> // here I called to toggleDrawer so the ChildComponent can be shown 
             <SomeIcon />
         </IconButton>
         
        <ChildComponent 
             anchor="right"
             open={drawerState}
             handleDrawerState={toggleDrawer}/> 

        </div>
  )
}

const CartDrawer = (props) => {

 // other stuff at the top 

 return(
    <Drawer
      anchor={props.anchor}
      open={props.open}
      onClose={props.handleDrawerState(props.anchor, false)}
    >
  )
}

未捕获错误：重新渲染过多。React限制了
渲染以防止无限循环

它们需要包装在一个anon函数中
如果在将函数作为道具添加时触发该函数，则无法将其作为道具调用（除非希望将触发函数的结果作为道具传递）

应该是这个吗

const ParentComponent = () {
     
   const [drawerState, setDrawerState] = useState(false);

   const toggleDrawer = (anchor, open) => {
        setDrawerState(open);
   }

  return(
       <div>
         <IconButton color="primary"                         
                     onClick={() => toggleDrawer("right", true)}> //anon func here
             <SomeIcon />
         </IconButton>
         
        <CartDrawer 
             anchor="right"
             open={drawerState}
             handleDrawerState={toggleDrawer}/> 

        </div>
  )
}


const ParentComponent=（）{
const[drawerState，setDrawerState]=useState（false）；
常量切换抽屉=（锚定，打开）=>{
设置抽屉状态（打开）；
}
返回(
toggleDrawer（“right”，true）}>//此处为anon func
)
}

const CartDrawer=（道具）=>{
//顶端的其他东西
返回(
props.handleDrawerState（props.anchor，false）}//annon func此处
/>
)
}

你现在拥有它的方式是，当组件挂载时，它只会发射一次

<MyComponent 
  onClick={handleClick()} // this will always fire on mount, never do this unless you want the result from the function as a prop and not the function as itself
/>


justanote
onClose={handleDrawerState（props.anchor，false）}
永远不会工作，因为它会在挂载时开火。您需要这样做
onClose={（）=>handleDrawerState（props.anchor，false）}
您应该在子组件中记录这些道具，从您向我们展示的情况来看，函数不在那里似乎是不可能的。@JoeLloyd ya I console.log（props）在子组件中，使用React material ui将上述结果作为statedIs onClose an event？@A.R.SEIF ya..I获取，该ui代表此签名：函数（事件：对象）=>无效事件：回调的事件源。
作为其文档