Javascript 反应功能未从功能组件传递到功能组件

我非常习惯于对组件进行分类，现在我正尝试更多地使用钩子，所以我正在深入研究功能组件

遇到了一个棘手的问题，因为我无法将一个函数从一个功能组件传递给它的功能组件子组件

在父组件中：

import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby';
import { MenuList, MenuItem } from '@material-ui/core';
import { withCookies, Cookies } from 'react-cookie';
import { ExpandMore } from '@material-ui/icons';
import PropTypes from 'prop-types';
import styles from '../styles/nav.module.scss';
import NavDrawer from './navDrawer';

const activeStyle = {
   color: '#445565',
   backgroundColor: '#de1b',
   borderColor: '#ced4da',
};

const NavMobile = (props) => {
const [isOpenProductsMenu, setIsOpenProductsMenu] = useState(false);
const [isOpenServicesMenu, setIsOpenServicesMenu] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);

const { cookies, categories } = props;
const main = process.env.ROOT_CATEGORIES.split(',');
useEffect(() => {
    if (cookies.get('roles')) {
        const roles = cookies.get('roles');
        setIsAdmin(!!roles.includes('ROLE_ADMIN') || roles.includes('ROLE_SUPERADMIN'));
    }
});
const toggleProductsMenu = (isOpen) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
        return;
    }
    setIsOpenProductsMenu(isOpen);
};
const toggleServicesMenu = (isOpen) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
        return;
    }
    setIsOpenServicesMenu(isOpen);
};
return (
    <MenuList className={styles.navMobile} style={{ padding: '0 10px 0 0' }}>
        <MenuItem disableGutters>
            <Link to="/" activeStyle={activeStyle}>Home</Link>
        </MenuItem>
        <MenuItem disableGutters>
            <Link to="/search" activeStyle={activeStyle}>Search</Link>
        </MenuItem>
        <MenuItem
            onMouseEnter={() => toggleProductsMenu(true)}
            onMouseLeave={() => toggleProductsMenu(false)}
            className={styles.overrideItem}
            disableGutters
        >
            <NavDrawer
                type={main[0]}
                open={isOpenProductsMenu}
                categories={categories}
                toggleMenu={toggleProductsMenu}
            />
            <Link to="/" onClick={(event) => event.preventDefault}>
                <div className={styles.itemWrap}>
                    {main[0]}
                    <ExpandMore />
                </div>
            </Link>
        </MenuItem>
        <MenuItem
            onMouseEnter={() => toggleServicesMenu(true)}
            onMouseLeave={() => toggleServicesMenu(false)}
            className={styles.overrideItem}
            disableGutters
        >
            <NavDrawer
                type={main[1]}
                open={isOpenServicesMenu}
                categories={categories}
                toggleMenu={toggleServicesMenu}
            />
            <Link to="/" onClick={(event) => event.preventDefault}>
                <div className={styles.itemWrap}>
                    {main[1]}
                    <ExpandMore />
                </div>
            </Link>
        </MenuItem>
        {isAdmin ?
            (
                <MenuItem disableGutters>
                    <Link to="/admin" activeStyle={activeStyle}>Admin</Link>
                </MenuItem>
            ) : null}
    </MenuList>
);
};

NavMobile.propTypes = {
    cookies: PropTypes.instanceOf(Cookies).isRequired,
   categories: PropTypes.array.isRequired,
};

 export default withCookies(NavMobile);

---

我遗漏了什么？

因此，在我指出两种可能的解决方案之前，需要注意的是，在父函数调用中使用了

render

方法，并且

render

方法仅在类函数中使用，而不是在无状态函数中使用

如果要使用无状态函数，则应使用

return

看看这两种方法的区别

以下是截图：

现在谈到解决方案，

无状态函数

不应该有方法，添加它们通常被认为是不好的做法。我知道您想熟悉非类组件，但混合使用这两种组件并没有什么错，这通常是应该做的。如果您想添加方法，您应该使用

类组件

，并像这样做：

class NavMobile extends Component {
  constructor(props) {
    super(props);   
    this.state = {
     // Empty for now
    }
  }


  toggleMenu = () => {
    // Your code
  }

  render() {
    return (
      // More code 

      <Navbar toggleMenu={this.toggleMenu} />

     // More code
    )
  }
}

然后像这样在组件中调用它

const NavMobile = (props) => {
  return (
    // Your code
    <NavBar toggleMenu={toggleMenu.bind(null, propsYouWantToPass} />
  )
}

const NavMobile=（道具）=>{
返回(
//你的代码
)
}

最后，您似乎在函数内部寻找一个事件对象，例如

（event.type==“keydown”）

但是没有传递这样的事件，因为在子组件

NavBar

中，您使用

false

参数调用它

如果有帮助，请告诉我

---

PS：我在一开始对

render

vs.

return

的评论是在您进行编辑之前针对您的代码的。我仍将把它留给后代。

未定义toggleProductsMenu和toggleServicesMenu中的事件对象

你们说你们的父组件是功能性的，但它有类组件的渲染功能。我的错，我在上面纠正了它。它实际上是一个功能组件。您是否可以在不通过toggleMenu的情况下检查代码中是否也从其他地方呈现了NavDrawer，因为behviour不应该来自您在Post中显示的当前代码您从哪里获得toggleProductsMenu和toggleServicesMenu中的

事件

对象？事件未定义。@IkechukwuEze。就这样。写一个答案，我会接受的。谢谢奇怪的是，

eslint

没有捕捉到它。我已将其设置为在存在此类错误时根本不编译。请尝试将eslint no undef rule设置为error，检查所有规则是否设置为error，除非它们是

中标记为
关闭的
的规则的一部分。eslintrc.json
。因此，无论何时未定义或未使用HMR，它都会导致错误和阻塞HMR。我能想到的唯一一件事是，这是一个链式函数。
const toggleMenu = (isOpen) => { ... };

const NavMobile = (props) => {
  return (
    // Your code
    <NavBar toggleMenu={toggleMenu.bind(null, propsYouWantToPass} />
  )
}