[React] this.props.children和Reac

场景

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class A extends Component {

    render() {
        const {children} = this.props,
            newChildren = React.Children.map(children, child =>
                React.cloneElement(
                    child,
                    { onChange: e => alert(e.target.value) }
                ));

        return (
            <div>
                {newChildren}
            </div>
        );
    }
}

class Page extends Component {

    render() {
        return (
            <A>
                <input />
                <input />
            </A>
        );
    }
}

ReactDOM.render(
    <Page />,
    document.getElementById('app')
);

解释

（1）this.props.children是组件props的隐藏属性，它的值是一个数组，
数组元素为ReactElement。

（2）React.cloneElement用来克隆ReactElement，返回一个新的元素。
以下用法是等价的：

React.cloneElement(
  element,
  props,
  children
);

<element.type {...element.props} {...props}>{children}</element.type>

（3）React.Children提供了一些工具函数来处理this.props.children。
包括：React.Children.map React.Children.forEach React.Children.count React.Children.only React.Children.toArray

参考

React Top-Level API: cloneElement()
React Top-Level API: React.Children