Props.children 和组件组成

组件的子组件可在特殊支柱 props.children 上获得。这个 prop 对于合成组件非常有用，并且可以使 JSX 标记更直观或反映 DOM 的预期最终结构：

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

这允许我们在以后使用组件时包含任意数量的子元素：

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.children 也可以由组件操作。因为 props.children 可能是也可能不是数组 ，React 为它们提供了实用函数 React.Children 。在前面的例子中考虑一下我们是否想要将每个段落包装在自己的 <section> 元素中：

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

注意使用 React.cloneElement 从子 <p> 标签中删除道具 - 因为道具是不可变的，这些值不能直接更改。相反，必须使用没有这些道具的克隆。

此外，在循环中添加元素时，请注意 React 在重新渲染过程中如何协调子项 ，并强烈考虑在循环中添加的子元素中包含全局唯一的 key prop。