React数组组件传参渲染报错：元素类型无效问题求助

问题场景 #

你在React开发中遇到的问题：主页面将组件数组传递给子组件，尝试在子组件中为数组内的组件添加props并渲染时触发错误，错误信息如下：

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

错误原因 #

1. 核心问题：主页面的arr中存储的是已实例化的JSX对象（<Comp1/>、<Comp2/>），而非组件本身（Comp1、Comp2）。React要求用于渲染的组件必须是类/函数类型，你在子组件中把JSX对象当作组件来使用（<FirstComp step={1}/>），直接触发类型错误。
2. 附带命名/语法错误：
   • comp1.js导出的组件名为Roue，但主页面导入的是Comp1，命名不匹配
   • childComponent.js导出的是MyPage，实际应导出MyChildComponent
   • mainPage.js的组件函数没有return渲染内容，且导入的组件名称与使用名称不一致

修复方案 #

1. 主页面传递组件类/函数数组，而非已实例化的JSX对象
2. 修正所有命名不匹配的问题
3. 子组件中直接使用组件并传递props，或用React.cloneElement合并原有props与新props

修正后的代码示例 #

mainPage.js #

import React from "react";
import Comp1 from "comps/comp1";
import Comp2 from "comps/comp2";
import MyChildComponent from "child/childComponent";

const MyPage = () => {
  // 传递组件本身，而非实例化的JSX
  const comps = [Comp1, Comp2];
  return <MyChildComponent comps={comps} />;
};

export default MyPage;

comp1.js（Comp2结构类似） #

import React from "react";
// 修正导出名称，与导入的Comp1对应
export const Comp1 = ({ step }) => (
  <p>Here is the step {step} </p>
);

childComponent.js #

import React from "react";

const MyChildComponent = ({ comps }) => {
  const FirstComp = comps[0];
  // 直接使用组件并传递props
  const FirstCompWithProp = <FirstComp step={1} />;

  // 若需保留原组件的默认props，可使用React.cloneElement合并：
  // const FirstCompWithProp = React.cloneElement(<FirstComp />, { step: 1 });

  return <>{FirstCompWithProp}</>;
};

export default MyChildComponent;

特殊场景处理 #

如果主页面确实需要传递已实例化的JSX（比如已携带部分props），子组件可通过React.cloneElement为现有组件实例添加新props：

const MyChildComponent = ({ comps }) => {
  const firstCompInstance = comps[0];
  // 合并新props到已有组件实例
  const FirstCompWithProp = React.cloneElement(firstCompInstance, { step: 1 });
  return <>{FirstCompWithProp}</>;
};

内容的提问来源于stack exchange，提问作者Arthur Fortin