如何在React的Props中传递组件构造函数？

你的思路完全可行，只需要调整组件渲染的写法——React要求组件名必须以大写字母开头，不能直接用props.meatType这种小写开头的表达式渲染。下面是完整的实现方案：

1. 定义公共Props类型（可选但推荐） #

如果PorkComponent和DuckComponent的Props结构一致，可以先提取公共类型，避免重复定义：

type MeatComponentProps = {
  children?: React.ReactNode;
  variant?: string; // 根据实际业务类型调整
};

如果两个组件Props有差异，也可以用联合类型：MeatComponentProps = PorkComponentProps | DuckComponentProps

2. 修正Lunch组件的类型与实现 #

import React from 'react';

type LunchProps = MeatComponentProps & {
  meatType: React.ComponentType<MeatComponentProps>;
};

const Lunch = (props: LunchProps) => {
  // 把传入的组件赋值给大写开头的变量，符合React组件命名规范
  const MeatComponent = props.meatType;
  // 解构出meatType，将剩余props传递给目标组件
  const { meatType, ...restProps } = props;
  
  return <MeatComponent {...restProps} />;
};

3. 调用方式 #

直接传入对应的组件类型即可，同时可以传递variant和children等参数：

// 渲染猪肉午餐
<Lunch meatType={PorkComponent} variant="spicy">
  配米饭
</Lunch>

// 渲染鸭肉午餐
<Lunch meatType={DuckComponent} variant="sweet">
  配面条
</Lunch>

为什么原来的写法不行？ #

React的JSX语法规则：以小写字母开头的标签会被解析为原生HTML元素（比如<div>），只有大写开头的变量才会被识别为React组件。所以必须把props.meatType赋值给大写的MeatComponent变量后再渲染。

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