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。