尝试使用React在导航中将图标切换为文本

import React, { useState } from 'react';
import { FaHome, FaUser, FaCog } from 'react-icons/fa';

const Navigation = () => {
  const [activeIcon, setActiveIcon] = useState('home');

  const handleIconClick = (icon) => {
    setActiveIcon(icon);
  };

  return (
    <nav>
      <ul>
        <li onClick={() => handleIconClick('home')}>
          {activeIcon === 'home' ? <span>Home</span> : <FaHome />}
        </li>
        <li onClick={() => handleIconClick('user')}>
          {activeIcon === 'user' ? <span>User</span> : <FaUser />}
        </li>
        <li onClick={() => handleIconClick('settings')}>
          {activeIcon === 'settings' ? <span>Settings</span> : <FaCog />}
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

import React from 'react';
import Navigation from './Navigation';

const App = () => {
  return (
    <div>
      <Navigation />
      {/* 其他应用程序内容 */}
    </div>
  );
};

export default App;