props属性传递

        React中组件的属性传递机制，由父组件传递给子组件，不能跨级传递。当有多个组件嵌套时，从最外层的祖先组件的props开始，依次向其后代组件传递props。

         本例组件嵌套顺序：Person——》Adult——》Child，写代码的时候先写内层组件

         body部分代码：

         <body> <!-- 由父元素的属性，传递给子元素。即祖先元素的属性依次传递给后代元素的属性 --> <div id="ele"></div> </body>

         注意script标签的type要设置为type=“text/babel”,以解析JSX

       （1） Child组件，里面放入三个p标签，显示name，age，sex

class Child extends React.Component{
    render(){
        return(
            <div>
                <p>{this.props.name}</p>
                <p>{this.props.age}</p>
                <p>{this.props.sex}</p>
            </div>
        )
    }
}

（2）Adult组件

class Adult extends React.Component{
    render(){
        return(
          <Child name={this.props.name}
                age={this.props.age}
                sex={this.props.sex}/>
        )
    }
}（3）Person组件，和Adult组件类似，这里使用了扩展运算符，可以将属性一一对应起来。
 
// {...this.props}扩展赋值，一一对应
class Person extends React.Component{
    render(){
        return(
            <Adult
            {...this.props}
            />
        )
    }
}<script type="text/babel">
class Child extends React.Component{
    render(){
        return(
            <div>
                <p>{this.props.name}</p>
                <p>{this.props.age}</p>
                <p>{this.props.sex}</p>
            </div>
        )
    }
}
class Adult extends React.Component{
    render(){
        return(
            <Child name={this.props.name}
                age={this.props.age}
                sex={this.props.sex}/>
        )
    }
}
// {...this.props}扩展赋值，一一对应
class Person extends React.Component{
    render(){
        return(
            <Adult
            {...this.props}
            />
        )
    }
}
//传参
ReactDOM.render(<Person name="Lily" age="12" sex="female"/>,document.getElementById("ele"))