Reactjs 下拉菜单和可重用组件答案

【问题标题】：Reactjs dropdown menu and reusable componentsReactjs 下拉菜单和可重用组件
【发布时间】：2022-02-08 23:44:29
【问题描述】：

我正在按照教程制作下拉菜单，但我被困在中间，因为没有像讲师在教程中那样使用“道具”关键字。我直接将道具作为没有道具点的参数传递。当我想在没有道具的情况下实现 {open && children} 时，我得到了没有定义孩子的错误

这是我正在学习的教程，当我收到错误https://youtu.be/IF6k0uZuypA?t=543的那一刻

这是我遇到问题的 NavItem.js 组件

import React, { useState, useEffect } from 'react';


function NavItem({ icon, title, ...props }) {
  const [opened, setOpened] = useState(false);

  return (
    <li className='nav-item'>
      
      <a
        href='#'
        target=''
        className='icon-button'
        onClick={() => setOpened(!open)}
      >
        
        {icon}
        <div>{title}</div>
      </a>
      {open && children}
      
    </li>
  );
}

export default NavItem;

这是我称之为 NavItem.js 组件的 Navbar.js 组件

import React from 'react';
import NavItem from './NavItem';
import BellIcon from './icons/bell.svg';
import { ReactComponent as MessengerIcon } from './icons/messenger.svg';
import { ReactComponent as CaretIcon } from './icons/caret.svg';
import { ReactComponent as PlusIcon } from './icons/plus.svg';
import { ReactComponent as ChevronIcon } from './icons/chevron.svg';

function Navbar() {
  return (
    <>
      <nav className='h-20 bg-[#242526] py-0 px-4   border-b border-[#474a4d] '>
        <ul className='max-w-full h-full flex justify-end'>
          <NavItem icon={<PlusIcon />} />
          <NavItem icon={<BellIcon />} />
          <NavItem icon={<MessengerIcon />} />
          <NavItem icon={<CaretIcon />}>
            {/* Here where to render The dropdown menu Items */}
          </NavItem>
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

我正在使用 Tailwindcss 进行样式设置谢谢你的帮助

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您必须继续销毁props 对象：

({ icon, title, children, ...props })

或通过props访问

{opened && props.children}

【讨论】：

children not defined 的错误消失了，但我仍然看不到 Navbar.js 组件中的渲染项：}> {/* 这里渲染下拉menu Items */}
Item1

Item2
有什么解决办法吗？
用opened 更新onClick={() => setOpened(!opened)}。 open 没有在任何地方定义。

Item1

Item2