它们需要包裹在anon函数中

Question

我有这个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>
  )
}

所以我在toggleDrawer中得到了ChildComponent函数，如下所示：

const CartDrawer = (props) => {

 // other stuff at the top 

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

如您所见，我通过访问handleDrawerState在ChildComponent中获得了props。但是我得到的是：

TypeError：props.handleDrawerState不是函数

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

const {handleDrawerState} = props

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

因此，我通过console.log(props)在浏览器中检查控制台，而不是在handleDrawerState中有一个对象，而在props中有一个键，它的显示如下：

原始：对象

就目前而言，我不明白自己在做错什么，因为在这里我看到，toggleDrawer中的ParentComponent是一个函数，但是传递给ChildComponent成为对象。因此，我无法在props的{{1}}中访问它。

问题：

因此，将函数传递给ChildComponent的正确方法是什么？

已更新：

如果我这样做：

ChildComponent

我得到这样的错误：

未捕获的错误：重新渲染次数过多。反应限制数量渲染以防止无限循环。

Answer 1

它们需要包裹在anon函数中

如果在将函数添加为prop时触发了该函数，则无法调用该函数作为prop（除非您希望将触发函数的结果作为prop传递）。

应该是这个

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 CartDrawer = (props) => {

 // other stuff at the top 

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

您现在拥有的方式，在安装组件时将仅触发一次。

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

当父级和子级组件也是功能组件时，如何将功能作为道具传递？

1 个答案:

它们需要包裹在anon函数中