前端Wiki/词条/children 与组合

children 与组合

定义组件标签之间内容的统一出口，配合组合手法做出灵活的组件 API

props.children 是 React 内建的特殊 prop：组件开闭标签之间写的任何东西都会作为 children 传进去。它不仅是文本——可以是元素、元素数组、函数乃至任何 JS 值。大多数业务组件的灵活性都建立在它之上：Card 包内容、Layout 包页面、Tabs 包面板，面板与容器解耦各自独立。

组合是 React 复用的正统道路：常用 children、render props、Context 三套机制按场景分工——结构简单用 children，标签需定制用具名插槽式的多 prop children，跨层级共享用 Context。用 React.Children.map 与 cloneElement 可以批量处理 children，但新代码推荐用具名 props 更直观。

组件标签之间的内容自动成为 props.children，任意类型均可
多个插槽用多个具名 prop（如 left/right），比单一 children 更明确
render props 与 children 一脉相承，函数即子级是常见组合手法

JavaScript

import { useState } from 'react';

function Card({ title, left, children }) {         // 具名插槽 + children
  return (
    <section className="card">
      <header>{title}</header>
      <div>{left}</div>
      <div className="body">{children}</div>
    </section>
  );
}

function Counter({ children }) {                    // render props：children 是函数
  const [count, setCount] = useState(0);
  return <div onClick={() => setCount(count + 1)}>{children(count)}</div>;
}

export default function App() {
  return (
    <Card title="面板" left={<button>返回</button>}>
      <p>主体内容</p>
      <Counter>{(n) => <span>点击 {n} 次</span>}</Counter>
    </Card>
  );
}

⚠ 常见误区

将 children 类型想当然当元素数组用：可能是文本、函数甚至 undefined
滥用 cloneElement 给 children 注入 props，类型系统与可读性一起崩坏
单一 children 用到极限才想起用具名插槽，组件 API 越来越乱

🔗 相关词条props 与 children 父子组件通信