React中条件渲染Styled Component类型的汉堡菜单图标问题

问题场景 #

你需要实现一个汉堡菜单组件，通过isOpen属性切换显示汉堡图标（菜单关闭时）和关闭图标（菜单打开时），组件调用代码如下：

<Hamburger onClick={navHandler} isOpen={isOpen} />

你尝试了以下代码但未成功：

export const Hamburger = styled(({ isOpen}) => (isOpen? CloseIcon : HamburgerIcon))`

问题原因 #

你之前的写法错误在于，直接将返回图标的函数传给styled()，但styled-components需要接收一个能正确渲染元素、传递props的组件，这种写法无法处理onClick等属性，也不符合styled的使用逻辑。

正确实现方式 #

方式一：拆分功能组件与样式组件

先定义一个处理图标切换的基础组件，再用styled-components包裹添加样式：

import styled from 'styled-components';
import HamburgerIcon from './path/to/HamburgerIcon';
import CloseIcon from './path/to/CloseIcon';

// 基础功能组件，负责根据isOpen切换图标
const HamburgerToggle = ({ isOpen, onClick, ...rest }) => {
  const ActiveIcon = isOpen ? CloseIcon : HamburgerIcon;
  return <ActiveIcon onClick={onClick} {...rest} />;
};

// 用styled添加样式
export const Hamburger = styled(HamburgerToggle)`
  width: 28px;
  height: 28px;
  cursor: pointer;
  // 可添加过渡动画提升交互体验
  transition: transform 0.2s ease;
  &:hover {
    transform: scale(1.1);
  }
`;

方式二：通过背景图切换（适用于SVG作为图片资源引入）

如果你的SVG是作为图片文件而非React组件引入，可直接在样式中通过background-image切换：

import styled from 'styled-components';
import hamburgerImg from './path/to/hamburger.svg';
import closeImg from './path/to/close.svg';

export const Hamburger = styled.button`
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-image: ${props => props.isOpen ? `url(${closeImg})` : `url(${hamburgerImg})`};

  // 点击反馈样式
  &:active {
    transform: scale(0.95);
  }
`;

组件调用保持不变 #

你的原有组件调用代码无需修改，依然可以正常使用：

<Hamburger onClick={navHandler} isOpen={isOpen} />

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