React(TS)如何根据Props值切换Material UI收藏与点赞图标

首先，先明确组件的Props类型（TypeScript下需保证类型安全）：

interface VacationCardProps {
  // 标记度假项是否已保存
  isSaved: boolean;
  // 度假项的点赞数
  likes: number;
  // 组件所需其他属性，按需补充
  title: string;
  coverImg: string;
}

接着导入你需要的Material UI图标（以保存、点赞系列为例，可根据实际使用的图标调整）：

import SaveIcon from '@mui/icons-material/Save';
import SavedIcon from '@mui/icons-material/Saved';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAltIcon';
import { IconButton } from '@mui/material'; // 通常图标会嵌套在IconButton中，方便添加点击交互

然后在VacationCard组件的className="MenuContent"容器内，通过条件渲染切换图标：

export const VacationCard = (props: VacationCardProps) => {
  return (
    <div className="VacationCard">
      {/* 组件其他内容，比如封面图、标题 */}
      <img src={props.coverImg} alt={props.title} />
      <h3>{props.title}</h3>

      {/* 图标所在的MenuContent容器 */}
      <div className="MenuContent">
        {/* 保存图标：根据isSaved状态切换 */}
        <IconButton>
          {props.isSaved ? <SavedIcon color="primary" /> : <SaveIcon />}
        </IconButton>

        {/* 点赞图标：根据likes数量判断切换 */}
        <IconButton>
          {props.likes >= 1 ? <ThumbUpIcon color="primary" /> : <ThumbUpOffAltIcon />}
        </IconButton>
      </div>
    </div>
  );
};

常见报错排查 #

• TS类型错误：确认Props接口定义正确，父组件传递的属性类型完全匹配（比如不要把isSaved传成字符串类型）。
• 图标无法导入：检查是否已安装@mui/icons-material依赖，且图标名称、导入路径无拼写错误。
• 渲染逻辑错误：核对条件判断符号（比如不要把>=写成>，或把===写成=）。
• MUI组件属性错误：如果使用IconButton，确保其属性符合MUI规范（比如onClick事件绑定正确）。

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