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}
/>
)
}
}
完整js代码：
<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"))
