本文详解如何正确将图标组件（如 SVG 或自定义 Icon）作为 prop 传递给子组件，避免因未传入或类型错误导致 “Element type is invalid: expected a string…” 报错。核心在于确保传入 Icon prop 的值是有效的 React 组件函数或类，并在子组件中正确渲染。
本文详解如何正确将图标组件（如 svg 或自定义 icon）作为 prop 传递给子组件，避免因未传入或类型错误导致 “element type is invalid: expected a string…” 报错。核心在于确保传入 `icon` prop 的值是有效的 react 组件函数或类，并在子组件中正确渲染。
该错误信息 —— Element type is invalid: expected a string... but got: undefined —— 表明 React 尝试渲染一个 undefined 值，而它本应是一个合法的组件（函数、类或内置标签如 div）。在你的 Item.js 中，问题出在这行：
<Icon />
此处 Icon 是从 props 解构得到的，但你在 Nav.js 中调用 <Item data="home" /> 时并未传入 Icon prop，因此 Icon 的值为 undefined，导致 <undefined /> 渲染失败。
✅ 正确做法：显式传入图标组件
假设你有一个 HomeIcon 组件（例如在 components/icons/HomeIcon.js 中）：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// components/icons/HomeIcon.js
import React from 'react';
const HomeIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" />
</svg>
);
export default HomeIcon;那么在 Nav.js 中需导入并传入该组件：
// Nav.js
import React from "react";
import Logo from "./components/Logo";
import Item from './components/Item';
import Tweetbutton from './components/Tweetbutton';
import Profile from './components/Profile';
import HomeIcon from './components/icons/HomeIcon'; // ✅ 导入图标组件
import SearchIcon from './components/icons/SearchIcon';
import NotificationsIcon from './components/icons/NotificationsIcon';
const Nav = () => {
return (
<div className='Nav'>
<Logo />
<div className='Nav__wrapper'>
{/* ✅ 每个 Item 都传入对应的 Icon 组件 */}
<Item data="Home" Icon={HomeIcon} />
<Item data="Search" Icon={SearchIcon} />
<Item data="Notifications" Icon={NotificationsIcon} />
<Item data="Messages" Icon={() => <span>✉️</span>} />
<Item data="Bookmarks" Icon={() => <span>?</span>} />
</div>
<Tweetbutton />
<Profile />
</div>
);
};
export default Nav;同时，请确保 Item.js 使用 className 而非 class（JSX 中必须用 className）：
// Item.js（修正版）
import React from 'react';
import './Global.css';
const Item = ({ data, Icon }) => {
// ? 安全检查：防止 Icon 未传入时崩溃
if (!Icon || typeof Icon !== 'function') {
console.warn(`Missing or invalid Icon prop in Item with data="${data}"`);
return (
<div className='item'>
<span>⚠️</span>
<h2>{data}</h2>
</div>
);
}
return (
<div className='item'> {/* ✅ class → className */}
<Icon />
<h2>{data}</h2>
</div>
);
};
export default Item;⚠️ 注意事项与最佳实践
- 命名一致性：Icon 是组件（首字母大写），不能是字符串（如 "home"）或未定义变量；
- 默认导出 vs 命名导出：确保 HomeIcon.js 使用 export default HomeIcon;，且 Nav.js 中 import HomeIcon from ... 匹配；若使用命名导出（export const HomeIcon = ...），则需 import { HomeIcon } from ...；
- 类型守卫：如上所示，在子组件中加入 typeof Icon === 'function' 判断，可提升开发体验与错误可读性；
- 避免 prop 钻取遗漏：当组件层级变深时，建议结合 Context 或自定义 Hook 管理图标配置，而非手动逐层传递。
通过以上调整，<Icon /> 将被正确识别为 React 组件，错误即刻消失，UI 也能按预期渲染图标与文字组合。
