React使用map渲染MUI图标时遇语法错误及对象渲染问题

核心问题分析 #

1. Unexpected token '<' 错误：constants.js 中直接写入 <Home/> 这类JSX语法，但文件扩展名是.js，多数React项目的Babel配置默认只处理.jsx/.tsx文件中的JSX，导致无法解析<符号。
2. Objects are not valid as a React child 错误：移除<后存储的是图标组件本身（如Home），直接放在{}中会把组件对象当作React子元素，而React仅支持渲染JSX元素、字符串、数字等合法类型。

分步解决方案 #

步骤1：修正constants.js（存储组件引用，而非JSX实例） #

先补全所有缺失的图标导入，然后在数组中存储组件本身（更规范的写法）：

// 建议重命名为 constants.jsx，或确保项目Babel配置支持.js文件解析JSX
import { Home } from "@mui/icons-material";
import { Code } from "@mui/icons-material";
import { OndemandVideo } from "@mui/icons-material";
import { SportsEsports } from "@mui/icons-material";
import { LiveTv } from "@mui/icons-material";
// 补全缺失的图标导入
import { MusicNote } from "@mui/icons-material";
import { School } from "@mui/icons-material";
import { GraphicEq } from "@mui/icons-material";

export const categories = [
   {name: 'New', icon: Home },
   {name: 'Coding', icon: Code},
   {name: 'ReactJS', icon: Code},
   {name: 'NextJS', icon: Code},
   {name: 'Music', icon: MusicNote},
   {name: 'Education', icon: School},
   {name: 'Podcast', icon: GraphicEq},
   {name: 'Movie', icon: OndemandVideo},
   {name: 'Gaming', icon: SportsEsports},
   {name: 'Live', icon: LiveTv},
];

步骤2：在Sidebar中正确渲染图标组件 #

遍历数组时，将存储的组件实例化为JSX元素：

import { Stack } from "@mui/material"
import { categories } from "../utils/constants" // 修正路径拼写错误：constans → constants

const Sidebar = () => {
  return (
      <Stack>
         {categories.map((category) => {
            const Icon = category.icon;
            return (
              <button key={category.name} className="category-btn"> 
                 <span><Icon /></span> 
                 <span>{category.name}</span>
              </button>
            )
         })}
      </Stack>
   )
}

export default Sidebar

额外注意事项 #

• 检查文件路径拼写：原代码中Sidebar的导入路径写为../utils/constans，实际文件名是constants.js，需修正拼写错误。
• 若坚持在constants.js中存储JSX实例，需将文件扩展名改为.jsx，并确保项目的webpack/Vite配置包含对.jsx文件的处理。

内容的提问来源于stack exchange，提问作者Dp-ras