React 中组件传入 JSX 元素作为 prop 时的常见错误解析-js教程-PHP中文网

React 中组件传入 JSX 元素作为 prop 时的常见错误解析

本文详解如何正确将图标组件（如 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>

此处 Icon 是从 props 解构得到的，但你在 Nav.js 中调用时并未传入 Icon prop，因此 Icon 的值为 undefined，导致渲染失败。

✅ 正确做法：显式传入图标组件

假设你有一个 HomeIcon 组件（例如在 components/icons/HomeIcon.js 中）：

dmap-jsapi-skill

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"></path></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></logo><div classname="Nav__wrapper">
        {/* ✅ 每个 Item 都传入对应的 Icon 组件 */}
        <item data="Home" icon="{HomeIcon}"></item><item data="Search" icon="{SearchIcon}"></item><item data="Notifications" icon="{NotificationsIcon}"></item><item data="Messages" icon="{()"><span>✉️</span>} />
        <item data="Bookmarks" icon="{()"><span>?</span>} />
      </item></item>
</div>
      <tweetbutton></tweetbutton><profile></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></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 管理图标配置，而非手动逐层传递。

通过以上调整，将被正确识别为 React 组件，错误即刻消失，UI 也能按预期渲染图标与文字组合。