React/TypeScript中如何实现支持特定子组件聚合的组件开发

完全可以实现，你当前定义的ToolbarProps和示例中的嵌套调用写法不匹配，可根据需求选择以下两种实现方案，都能保证组件使用灵活性。

方案1：显式Props传参（类型校验最简便） #

如果你不强制要求嵌套JSX写法，可以直接用你最初定义的Props结构，调用时把左右内容作为属性传入即可：

// 类型定义
export type ToolbarProps = {
  children?: React.ReactNode,
  contentLeft: React.ReactNode,
  contentRight: React.ReactNode
}

// 组件实现
const Toolbar = ({ contentLeft, contentRight, children }: ToolbarProps) => {
  return (
    <div className="toolbar">
      <div className="toolbar-left">{contentLeft}</div>
      <div className="toolbar-main">{children}</div>
      <div className="toolbar-right">{contentRight}</div>
    </div>
  )
}

// 使用示例
<Toolbar
  contentLeft={<button>返回</button>}
  contentRight={<button>提交</button>}
>
  中间标题内容
</Toolbar>

这种方案不需要额外的子组件识别逻辑，TS原生支持类型校验，contentLeft和contentRight可以传入任意合法React节点，灵活度最高，缺点是和你给出的嵌套写法不一致。

方案2：嵌套子组件写法（完全匹配你的使用示例） #

如果要实现示例中把<ContentLeft>、<ContentRight>作为子元素嵌套在<Toolbar>内的效果，需要先定义两个标识性的子组件，再在Toolbar中遍历children提取对应内容。

步骤1：定义子组件 #

给子组件添加唯一静态标识，避免生产环境代码压缩后类型判断失效：

// 唯一标识，避免组件重名冲突
const LEFT_TYPE = Symbol('toolbar.content.left')
const RIGHT_TYPE = Symbol('toolbar.content.right')

// 左侧内容容器
export const ContentLeft = ({ children }: { children?: React.ReactNode }) => {
  return <>{children}</>
}
ContentLeft.$$type = LEFT_TYPE

// 右侧内容容器
export const ContentRight = ({ children }: { children?: React.ReactNode }) => {
  return <>{children}</>
}
ContentRight.$$type = RIGHT_TYPE

步骤2：实现Toolbar组件 #

用React内置的ChildrenAPI遍历子节点，按标识提取对应内容放到指定渲染位置：

// 限定children的合法类型，TS会自动校验非法子组件
type ToolbarValidChild = 
  | React.ReactElement<typeof ContentLeft>
  | React.ReactElement<typeof ContentRight>
  | Exclude<React.ReactNode, React.ReactElement> // 允许文本、null、数字等非元素节点

export type ToolbarProps = {
  children?: ToolbarValidChild | ToolbarValidChild[]
}

export const Toolbar = ({ children }: ToolbarProps) => {
  let leftContent: React.ReactNode = null
  let rightContent: React.ReactNode = null
  const defaultContent: React.ReactNode[] = []

  // 遍历子节点分类
  React.Children.forEach(children, (node) => {
    if (!React.isValidElement(node)) {
      defaultContent.push(node)
      return
    }
    const nodeType = (node.type as typeof ContentLeft | typeof ContentRight | null)?.$$type
    switch (nodeType) {
      case LEFT_TYPE:
        leftContent = node
        break
      case RIGHT_TYPE:
        rightContent = node
        break
      default:
        defaultContent.push(node)
    }
  })

  return (
    <div className="toolbar">
      <div className="toolbar-left">{leftContent}</div>
      <div className="toolbar-main">{defaultContent}</div>
      <div className="toolbar-right">{rightContent}</div>
    </div>
  )
}

使用说明 #

• ContentLeft和ContentRight内部可以传入任意React节点，没有额外限制，完全满足动态内容的灵活使用需求
• 如果不需要TS强校验子组件类型，可以去掉ToolbarValidChild类型限定，直接用React.ReactNode作为children类型，灵活度更高
• 如果需要支持Fragment包裹的子组件，可以加一层递归遍历，展开Fragment后再做类型识别
• 不要直接用node.type === ContentLeft做判断，生产环境构建压缩、多React实例场景下会出现判断失效的问题，用静态Symbol标识的方案更稳定

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