帮我用react写一个导航菜单

以下是一个简单的导航菜单组件示例：

import React, { useState } from 'react';

const NavMenu = () => {
  const [active, setActive] = useState('');

  const handleClick = (e) => {
    setActive(e.target.id);
  };

  return (
    <nav>
      <ul>
        <li id="home" className={active === 'home' ? 'active' : ''} onClick={handleClick}>Home</li>
        <li id="about" className={active === 'about' ? 'active' : ''} onClick={handleClick}>About</li>
        <li id="contact" className={active === 'contact' ? 'active' : ''} onClick={handleClick}>Contact</li>
      </ul>
    </nav>
  );
};

export default NavMenu;

这个组件使用useState钩子来跟踪当前活动的菜单项，然后使用onClick事件处理程序来更新它。组件输出一个nav元素和一个包含三个li元素的无序列表。每个li元素都有一个唯一的id，一个className属性和一个onClick事件处理程序。如果li的id与当前活动状态匹配，它将被标记为“active”，并且单击时将更新active状态。