如何在 React 中为数组里的组件传递 props

本文讲解如何正确将组件类型（而非已渲染的 jsx 元素）存入数组，并在子组件中动态实例化、传参并渲染，避免 “element type is invalid” 错误。

为避免 “element type is invalid” 错误，数组中应保存组件类型，而不是已经渲染的 jsx 元素；之后再交由子组件完成传参、动态实例化与渲染。

在 React 开发中，常需将多个组件以数组形式传递给子组件，并在子组件中按需渲染、注入动态 props（如 step={1}）。但一个常见误区是：直接将已调用的 JSX 元素（如 <Comp1 />）存入数组——这会导致组件被提前执行，返回的是 React Element 对象（即 React.createElement(...) 的结果），而非可复用的组件函数/类，从而在后续 props 注入时触发 Element type is invalid 报错。

✅ 应传组件引用：不要传 JSX 实例

数组中应保存组件本身，也就是函数或类，而不是调用组件后得到的 JSX：

// mainPage.jsimport React from "react";import Comp1 from "comps/comp1";import Comp2 from "comps/comp2";import MyChildComponent from "child/childComponent";const MyPage = () => {  // ❌ 错误：存储的是已渲染的 JSX 元素（React Element 对象）  // let arr = [<Comp1 />, <Comp2 />];  // ✅ 正确：存储组件引用（函数）  const arr = [Comp1, Comp2]; // 类型：[Function, Function]  return <MyChildComponent comps={arr} />;};export default MyPage;

Comp1 函数此时保存在 arr[0] 中，因此传入任意 props 后，均可由 JSX 安全渲染：

// childComponent.jsimport React from "react";const MyChildComponent = ({ comps }) => {  // 获取第一个组件类型  const FirstComp = comps[0];  // ✅ 动态创建带 props 的元素（等价于 <Comp1 step={1} />）  const FirstCompProp = <FirstComp step={1} />;  return (    <div>      {FirstCompProp}      {/* 如需渲染全部组件，可 map 并传不同 props */}      {comps.map((Comp, index) => (        <Comp key={index} step={index + 1} />      ))}    </div>  );};export default MyChildComponent;

? 其他说明及注意事项

• 组件命名要求：组件名称的首字母必须大写，例如 Comp1；否则 React 会把它识别为 div 这类原生 DOM 标签，最终造成渲染失败。
• Props 透传灵活性：你可在 MyChildComponent 中统一传参（如 step={i+1}），也可结合额外 prop（如 compsWithProps = [{ Comp: Comp1, props: { step: 1 } }]）实现更复杂配置。
• 类型安全建议（TypeScript）：

  type ComponentWithProps<T = Record<string, unknown>> = React.ComponentType<T>;const arr: ComponentWithProps<{ step: number }>[] = [Comp1, Comp2];

• 性能注意事项：为避免多余更新，可用 React.memo 包裹 Comp1/Comp2；该建议适用于组件需要频繁重渲染的情况。

将组件引用而非 JSX 实例进行传递，既可让父组件保持简洁，也能把完整的渲染控制权交给子组件；对于可复用布局容器、步骤导航和插件式 UI 等场景，这是重要的构建基础。