React JavaScript通用组件开发：动态渲染子组件问题求解

你的需求完全可以实现，核心问题出在React的JSX解析规则上——React要求自定义组件的变量名必须以大写字母开头，否则会被当作原生HTML标签处理，这就是你无法渲染<component/>的原因。

修正后的实现代码 #

首先调整GenericSelect组件，把传入的component变量重命名为大写开头的Component，同时修正循环中访问属性的错误并添加必要的key：

export const GenericSelect = (props) => {
  // 解构时将component重命名为大写开头的Component
  const { component: Component, items } = props;
  
  return (
    <>
      {items?.map((item, index) => (
        // 使用大写的Component作为组件标签，修正item属性访问，添加key
        <Component 
          key={index} 
          id={item.id} 
          name={item.name} 
        />
      ))}
    </>
  );
};

使用方式不变 #

调用组件时依然可以保持原来的写法，内部重命名已经处理了大小写问题：

<GenericSelect component={NonGenericCard} items={items} />

关键注意事项 #

• 组件名大写规则：这是React区分自定义组件和原生HTML元素的核心机制，任何自定义组件在JSX中渲染时，变量名必须以大写字母开头。
• map循环的key：React要求列表元素必须有唯一的key属性，这里用index是简单方案，最好用item.id（如果id唯一）。
• 属性访问修正：原代码中items.id是错误的，应该访问循环项item的属性，否则会取到数组本身的id（通常不存在）。

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