React Icons点击切换轮廓与填充样式异常及子组件点击事件传递问题求助

Let's break down how to fix both issues you're facing—first the synchronized icon toggling, then adding click functionality to your reusable HeaderIcon component.

Why All Icons Were Toggling Together #

You nailed the root cause: all your icons shared a single isActive state in the parent Header component. When you clicked any icon, that state flipped, and every icon reacted to the same value. The solution is to give each icon its own independent state, which your HeaderIcon component is perfectly positioned to handle.

Step 1: Refine Your Reusable HeaderIcon Component #

We'll add the click handler directly inside the component, let it manage its own active state, and accept the outline/fill icons as props. Here's the updated code:

import { useState } from 'react';

function HeaderIcon({ OutlineIcon, FillIcon }) { 
  // Each icon gets its own isolated active state
  const [isActive, setIsActive] = useState(false); 

  const handleIconClick = () => {
    // Toggle state using the previous value to avoid race conditions
    setIsActive(prevState => !prevState);
  };

  return ( 
    <div 
      className="cursor-pointer select-none"
      onClick={handleIconClick} // Attach click handler to the icon container
    >
      {/* Render the correct icon based on the component's local state */}
      {isActive ? <FillIcon /> : <OutlineIcon />}
    </div> 
  ); 
} 

export default HeaderIcon;

Key Improvements: #

• Local isActive state: Each HeaderIcon instance now tracks its own activation status independently.
• Safe state toggling: Using prevState ensures we're always working with the most up-to-date state value.
• Clickable container: The outer <div> handles clicks, so users can interact with the entire icon area.
• Clear prop naming: Renamed props to OutlineIcon and FillIcon for readability (feel free to keep your original names if you prefer).

Step 2: Use the Component in Your Header #

Now you can render each icon as a separate HeaderIcon instance, passing in the corresponding outline and fill components from react-icons:

import HeaderIcon from './HeaderIcon';
import { AiOutlineHome, AiFillHome } from 'react-icons/ai';
import { MdOutlineAddBox, MdAddBox } from 'react-icons/md';

function Header() { 
  return ( 
    <div className="flex items-center space-x-6"> 
      <HeaderIcon OutlineIcon={AiOutlineHome} FillIcon={AiFillHome} />
      <HeaderIcon OutlineIcon={MdOutlineAddBox} FillIcon={MdAddBox} />
      {/* Add more icons here following the same pattern */}
    </div>
  );
}

Optional: Make the Component Controlled (For External State Management) #

If you ever need to control the icon's active state from the parent component (e.g., resetting icons or syncing with global state), convert HeaderIcon into a controlled component:

function HeaderIcon({ OutlineIcon, FillIcon, isActive, onToggle }) { 
  const handleIconClick = () => {
    // Delegate state changes to the parent component
    onToggle?.();
  };

  return ( 
    <div 
      className="cursor-pointer select-none"
      onClick={handleIconClick}
    >
      {isActive ? <FillIcon /> : <OutlineIcon />}
    </div> 
  ); 
} 

Then use it in Header like this:

function Header() { 
  const [isHomeActive, setIsHomeActive] = useState(false);
  const [isAddBoxActive, setIsAddBoxActive] = useState(false);

  return ( 
    <div className="flex items-center space-x-6"> 
      <HeaderIcon 
        OutlineIcon={AiOutlineHome} 
        FillIcon={AiFillHome}
        isActive={isHomeActive}
        onToggle={() => setIsHomeActive(prev => !prev)}
      />
      <HeaderIcon 
        OutlineIcon={MdOutlineAddBox} 
        FillIcon={MdAddBox}
        isActive={isAddBoxActive}
        onToggle={() => setIsAddBoxActive(prev => !prev)}
      />
    </div>
  );
}

This gives you flexibility depending on whether you want local or parent-managed state for your icons.

内容的提问来源于stack exchange，提问作者Chee Thong