React.Children

Posted 2020-09-27

一直分不清React.Children与this.props.children是什么关系。其实很简单，this.props.children是子组件的集合，相当于把子组件当做组件的属性传入。

this.props.children有三种情况：

1.没有子组件时，数据类型为undefined

2.只有一个子组件时，数据类型为object

3.有多个子组件时，数据类型为数组

 

React.Children是React提供用来处理this.props.children的API，不用考虑this.props.children的数据类型，React.Children有map、forEach、count等方法

渲染组件：

ReactDOM.render(
    <APP>
        <div data={1}></div>
        <div data={2}></div>
        <div data={3}></div>
    </APP>,
    document.getElementById(‘root‘)
);

组件内：

export default class APP extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <ul>
            {React.Children.map(this.props.children,(child) =>{
                return (
                    <li>序号:{child.props.data}</li>
                )
            })}
            </ul>
            )
    }
}