动态React导航组件

Question

我希望有人能对此提供一些创造性的反馈。我终于明白了地图和对象及其方法。

我已经重构了导航组件，以使用地图创建链接。对React很陌生...有什么办法可以使它变得更好吗？

import React, {useState} from 'react'
import { Link } from 'gatsby'
import { IconContext } from "react-icons";
import { MdMenu } from "react-icons/md";
import './darkmode.module.scss'

const Nav = () => {
 
    const styles = {
        className:'text-gray-600 block px-2 py-1 hover:underline hover:text-gray-900',
        activeClassName: 'underline text-gray-900'
    }
    
    const links = [
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/projects',
            name: 'Projects'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/posts',
            name: 'Posts'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/contact',
            name: 'Contact'
        },
 
    ]

    const [open, setOpen] = useState(false)
    const twStyles = 'pt-2 pb-4 sm:flex sm:p-0'
    const navShow = open ? `${twStyles} block` : `hidden ${twStyles} sm:block`

    return (
        <header className="sm:flex sm:justify-between sm:items-center sm:px-0 sm:py-3">
            <div className="flex items-center justify-between py-3 sm:p-0">
                <div>
                    <h1 className="mb-0 text-lg">
                        <Link to="/" className="text-gray-800">
                            {data.site.siteMetadata.social}
                        </Link>
                    </h1>
                </div>
                <div className="hamburger sm:hidden">
                    <button onClick={() => setOpen(!open)} type="button" className="block text-gray-900 ">
                        <IconContext.Provider value={{ className: "h-8 w-8 hamburger" }}>
                            <MdMenu />
                        </IconContext.Provider>
                    </button>
                </div>
            </div>

            <div className={navShow}>
                {links.map(link => (<Link className={link.className} activeClassName={link.activeClassName} to={link.to}>{link.name}</Link> ))}
            </div>

        </header>
    )
}

export default Nav

我打算在单击按钮后将汉堡包图标换成其他图标...这只是一个简单的if语句吗？