如何在 React 中正确地将组件类型数组传递给子组件并动态传入 props

本文讲解 react 中向子组件传递组件类型数组（而非已渲染的 jsx 元素）的正确方式，解决因提前调用组件导致“element type is invalid”错误的问题，并提供可复用的实践模式。

本文讲解 react 中向子组件传递组件类型数组（而非已渲染的 jsx 元素）的正确方式，解决因提前调用组件导致“element type is invalid”错误的问题，并提供可复用的实践模式。

在 React 开发中，我们常希望将一组可复用的组件类型（如 Comp1、Comp2）以数组形式传递给容器型子组件，由其统一控制渲染逻辑与 props 注入。但一个常见误区是：在父组件中直接写 <Comp1/> 并存入数组——这会立即执行组件函数，返回的是已解析的 JSX 元素（即 ReactElement 对象），而非组件类型本身。当子组件尝试再次用 <FirstComp step={1} /> 渲染时，React 会报错：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

因为此时 FirstComp 是一个 object（即 ReactElement），而非合法的组件函数或类。

正确做法是：传递组件引用（函数/类），而非调用后的 JSX。

✅ 修改步骤

1. 父组件中传递组件类型（非 JSX）

// mainPage.jsimport React from "react";import Comp1 from "comps/comp1";import Comp2 from "comps/comp2";import MyChildComponent from "child/childComponent";const MyPage = () => {  // ❌ 错误：提前渲染，得到的是 ReactElement 数组  // const arr = [<Comp1 />, <Comp2 />];  // ✅ 正确：传递组件函数引用  const arr = [Comp1, Comp2];  return <MyChildComponent comps={arr} />;};export default MyPage;

2. 子组件中动态创建带 props 的元素

// childComponent.jsimport React from "react";const MyChildComponent = ({ comps }) => {  // 取出第一个组件类型（函数）  const FirstComp = comps[0];  // ✅ 正确：用组件类型 + props 创建新元素（JSX 调用）  const FirstCompProp = <FirstComp step={1} />;  return (    <div>      {FirstCompProp}      {/* 如需渲染全部，可 map： */}      {/* {comps.map((Comp, index) => <Comp key={index} step={index + 1} />)} */}    </div>  );};export default MyChildComponent;

3. 确保子组件接收 props 并正确使用（示例 Comp1）

// comps/comp1.jsimport React from "react";// 注意：组件名建议首字母大写（Roue → Comp1），此处按原名保留export const Roue = ({ step }) => (  <p>Here is the step {step}</p>);

⚠️ 注意事项

1. 组件名必须大写：Comp1 是合法组件名；若写成 comp1，JSX 会将其视为 DOM 标签（小写），导致渲染失败。
2. 避免在 map 中省略 key：若渲染多个组件，务必添加稳定 key（如索引仅限无顺序变化场景，推荐用唯一 ID）。
3. 类型安全提示（TypeScript 可选）：可定义 comps: Array<React.ComponentType<{ step: number }>> 提升可维护性。
4. 高阶用法：如需为每个组件注入不同 props，可传入组件与配置元组数组，例如 [{ Comp: Comp1, props: { step: 1 } }, ...]。

✅ 总结

核心原则是区分「组件类型」（function/class）和「组件实例」（<Comp /> 返回的 ReactElement）。只有前者能被多次用于构造不同 props 的元素。牢记：数组里存函数，JSX 里再调用——这是实现动态组件注入的关键范式。