如何在数组中创建带props的React元素并通过遍历数组直接渲染

你直接调用Hero(heroSectionProps)得到的是已经生成的JSX元素（即最终要渲染的节点对象），不是组件函数/类定义。后续使用<Section />时React会将Section作为组件类型解析，发现不符合组件类型要求（原生标签字符串/函数组件/类组件），就会触发该报错。

完全可行，只是你调用方式出错，有两种符合React规则的实现路径。

看业务场景判断，优缺点如下：

• 优势：
  • 配置逻辑更简洁，不需要维护组件名到组件的映射表，也不需要拆分name和props单独传递，TS类型提示更友好
  • 区块的组件和绑定的Props聚合在配置层，渲染层不需要处理匹配逻辑，代码更清爽
• 劣势：
  • 如果提前创建的JSX依赖动态值（比如路由参数、全局状态、组件内部state），会出现闭包陷阱，拿到的是创建时的旧值而非渲染时的最新值
  • 渲染层无法灵活统一注入公共Props（比如全局主题、页面级公共参数），改造成本比原有的name+props配置方案高
  • 大量提前创建的JSX会占用少量内存，不过绝大多数业务场景可以忽略该影响

如果你的页面区块都是静态配置、不需要动态修改Props，该方案非常值得用；如果有大量动态参数需求，建议保留原有方案或者选用下面的函数式配置方案。

方案1：直接存储JSX元素（最简单，适合静态配置场景） #

提前在配置里写好完整JSX，渲染时直接输出即可，不需要再套组件标签：

配置文件代码 #

import { Hero } from "~/sections"

const heroSectionProps = { /* 你的配置参数 */ }

const pageLayout = {
  // 注意给列表元素加唯一key，符合React列表渲染要求
  sections: [<Hero key="hero" {...heroSectionProps} />]
}

页面渲染代码 #

export const Page = ({ sections, ...props }) => {
  // 直接输出JSX数组即可
  return <>{sections}</>
}

方案2：存储匿名函数组件（适合需要动态注入公共Props的场景） #

配置里存储返回JSX的函数，渲染时可以传递额外参数，灵活性和原有方案一致：

配置文件代码 #

import { Hero } from "~/sections"

const heroSectionProps = { /* 你的配置参数 */ }

const pageLayout = {
  sections: [
    // 函数可以接收渲染层传递的公共参数
    (extraProps) => <Hero key="hero" {...heroSectionProps} {...extraProps} />
  ]
}

页面渲染代码 #

export const Page = ({ sections, ...pageProps }) => {
  return sections.map((RenderSection, index) => (
    <RenderSection key={index} {...pageProps} />
  ))
}

注意：如果Props依赖组件内部的state、路由参数等动态值，不要在组件外部提前创建JSX，要么把配置逻辑移到组件内部，要么选用方案2的函数式配置避免闭包问题。

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