如何开发支持传入string/string[]并返回对应JSX元素的React组件

算力阿峰

2026-10-6

实现方案

核心思路

用对象映射表替代switch case，后续新增类型只需要修改映射表，维护成本更低
入参做统一格式处理：将传入的elementType统一转为数组，同时兼容单个字符串和字符串数组两种入参格式，不需要编写两套逻辑
遍历数组匹配映射表内容返回，增加兜底逻辑处理不识别的类型

完整实现代码

import React from 'react'

// 类型映射配置，新增元素类型直接在这里添加即可
const ELEMENT_TYPE_MAP = {
  elementType1: <>elementType1</>,
  elementType2: <>elementType2</>,
  // 示例：新增类型
  // elementType3: <CustomComponent />
}

const ComponentThatReturnsElement = ({ elementType }) => {
  // 统一转换为数组，兼容单字符串/字符串数组入参
  const renderList = Array.isArray(elementType) ? elementType : [elementType]

  return (
    <>
      {renderList.map((type, index) => (
        <React.Fragment key={type ?? index}>
          {/* 匹配不到的类型默认返回null，也可以自定义兜底组件 */}
          {ELEMENT_TYPE_MAP[type] ?? null}
        </React.Fragment>
      ))}
    </>
  )
}

export default ComponentThatReturnsElement

使用示例

传入单个字符串

<ComponentThatReturnsElement elementType="elementType1" />

传入字符串数组

<ComponentThatReturnsElement elementType={["elementType1", "elementType2"]} />

适配原有的map调用场景

{someArray.map(({ prop1, prop2 }) => (
  <ComponentThatReturnsElement
    key={prop1.someId}
    // prop2不管是单个字符串还是字符串数组都可以直接传入
    elementType={prop2}
  />
))}

进阶优化建议

如果返回的元素需要传递自定义属性，可以将映射表的值修改为函数，动态接收参数返回JSX：

const ELEMENT_TYPE_MAP = {
  elementType1: (props) => <ElementType1 {...props} />,
  elementType2: (props) => <ElementType2 {...props} />,
}
// 组件内调用方式
{ELEMENT_TYPE_MAP[type]?.(customProps) ?? null}