reactjs - 将函数传递给另一个组件得到错误，这是未定义的反应 js

Question

我正在开发一个带有滑动菜单的应用程序，但我收到以下错误。

这没有定义

我的代码

我的文件

const toggleMenu = () => {
    alert("clicked");
    state = !state
    if (state === false) {
        const visibllity = "close";
        alert("open")
    } else {
        const viisibility = "open"
        alert("close")
    }

}
return (
    <RiderHeader toggleMenu={this.toggleMenu()} />
)

RiderHeader.js

 return (
    <div className="user-header">
        <IconButton onClick={() => toggleMenu()}>
           <MenuIcon />
        </IconButton>
    </div>
 )

标签： reactjs

Answer 1

this您在声明（或将其作为道具传递）时不应调用该函数。

<Component prop={this.func} /> or <Component prop={() => this.func()} />

在定义了 toggleMenu 的文件中，

return (
    <RiderHeader toggleMenu={this.toggleMenu} />
)

在 RiderHeader.js 中，如果它是一个类组件，那么，

return (
    <div className="user-header">
        <IconButton onClick={() => this.props.toggleMenu()}>
        {/* or
           <IconButton onClick={this.props.toggleMenu}>
        */}
           <MenuIcon />
        </IconButton>
    </div>
 )

如果它是一个功能组件，

return (
    <div className="user-header">
        <IconButton onClick={() => props.toggleMenu()}>
        {/* or
           <IconButton onClick={props.toggleMenu}>
        */}
           <MenuIcon />
        </IconButton>
    </div>
 )