TypeScript中如何向props传入的React组件注入子元素

该需求可以实现，但你示例中<props.parent>{myStuff}</props.parent>的写法不符合JSX语法规则，无法直接编译运行，需要借助React提供的API实现，完全可以匹配你预期的组件调用形式。

最贴合你现有调用逻辑的方案是使用React.cloneElement API，原理是复制你通过props传入的已创建React元素，在保留元素原有props、原有子节点的基础上，追加你需要的自定义内容作为新的子节点。
完整实现代码如下：

import { cloneElement, type ReactElement, type ReactNode } from 'react';

// 组件Props类型定义
interface IMyProps {
  parent: ReactElement;
}

function MyComponent(props: IMyProps) {
  // 你需要追加的自定义内容
  const myStuff: ReactNode = <span>自定义追加内容</span>;

  // 克隆传入的父元素，合并原有属性、追加新子节点
  return cloneElement(
    props.parent,
    // 第二个参数：合并父元素原有props，避免覆盖原本绑定的事件、样式等属性
    { ...props.parent.props },
    // 后续参数为子节点，先保留父元素原本的子节点，再追加自定义内容
    props.parent.props.children,
    myStuff
  );
}

// 调用方式和你预期完全一致
<MyComponent parent={<h1 className="page-title" />} />

上述代码最终渲染结果等价于：

<h1 class="page-title">
  <!-- 如果传入的h1原本有子节点会保留在这里 -->
  <span>自定义追加内容</span>
</h1>

如果可以调整props的传参形式，也可以选择传入组件类型/原生标签名而非已渲染的元素，这种写法可以直接用JSX语法编写，但调用方式会和你预期的有区别：

import type { ReactNode, ComponentType } from 'react';

interface IMyProps {
  // 支持传原生标签字符串、自定义组件
  parent: keyof JSX.IntrinsicElements | ComponentType<any>;
}

function MyComponent(props: IMyProps) {
  // JSX要求组件/标签名必须大写开头，所以先承接给大写变量
  const Parent = props.parent;
  const myStuff: ReactNode = <span>自定义追加内容</span>;

  return <Parent>{myStuff}</Parent>
}

// 调用时传标签名/组件本身，不需要写成<h1 />
<MyComponent parent="h1" />

• 使用cloneElement方案时，需要约束传入的parent必须是可以承载子节点的元素（普通DOM标签、可接收children的自定义组件），如果传入文本节点、Fragment这类无法承载属性/子节点的元素会出现运行时错误。
• JSX语法不支持直接在标签名位置写对象属性表达式，<props.xxx>的写法会被编译识别错误，不要直接使用这类写法。

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