如何在map遍历中无需临时变量直接渲染JS对象存储的React组件？

云原生阿岚

2026-10-1

正确实现方案

你想要省略临时变量的需求有两种合法实现方式，需要注意不能直接把组件当成普通函数调用，直接调用sections[section.type](props)会绕过React的组件调度逻辑，违反hooks规则，在使用dynamic导入的场景下还会导致加载状态异常。

方案1：使用`React.createElement`（最贴近你想要的函数调用写法）

React.createElement是JSX语法的底层实现，完全符合你期望的调用形式：

export default function Page({ page }) { 
  return (
    <main>
      {page.sections.map((section, index) => 
        React.createElement(
          sections[section.type] || null,
          {
            key: `${pageKey}-${index}`,
            id: index,
            fields: section.fields
          }
        )
      )}
    </main>
  );
}

方案2：用括号包裹动态组件直接写JSX

如果更习惯JSX写法，只需要用括号把动态取到的组件表达式包裹起来即可，JSX会自动识别括号内的结果为自定义组件，不会当成原生DOM标签处理：

export default function Page({ page }) { 
  return (
    <main>
      {page.sections.map((section, index) => (
        <(sections[section.type] || null)
          key={`${pageKey}-${index}`}
          id={index}
          fields={section.fields}
        />
      ))}
    </main>
  );
}