React（六）—— Props.children

this.props对象的属性与组件的属性一一对应，但有一个例外，就是this.props.children属性。它表示组件的所有子节点

在HTML中，li标签就是ol标签的字标签，vue里二级路由又是一级路由的子路由

组件经常会写入很多子属性，就像我们HTML当中的下，一定有很多标签。这种子属性的需求，就要用到this.props.children属性。

前几天忙于工作，再啰嗦一下初始化！！script的type属性必须为“text/bable”，render函数必须存在于类的模板创建，return函数加括号是为了jsx的语法更加美化，并且返回的HTML 必须存在一个根标签

    class HelloComponent extends React.Component{
        constructor(props){
        super(props)
        }
        render(){
            return(
               

                 {}
               
            )
        }
    }

今天介绍了一下子节点的写法

 render(){
            return(
               

                 {React.Children.map(this.props.children,function(child) {
                     return 
{child}
                 })}
               
            )
        }

React.Children.map需要注意的是React.Children的大小写，C是大写的，这里的参数需要注意一下
第一个参数this.props.children是模板内部的子标签集合

之前我们渲染模板 偷懒都使用单标签 如果要传递子节点必须使用双标签

这里的1 2 是ol的标签自带属性

React.Children.count用来计算子标签的个数，注意这里不能使用length

再回顾一下渲染，可能小伙伴有点懵

在React中，ReactDOM.render是可以渲染模板跟变量的

两者的渲染相同，此时渲染的是变量

所以还是要区分一下的，那当然此处可以是

还需要注意的是组合

因为Row与Col不是模板是变量

此时Row 与Col就是模板组件了，但是渲染的Gird还是变量，还是用变量渲染

今天先介绍这里，日后会使用create-react-app 再撸一遍 可能详细可能简略 看时间吧