React中组件的props属性传递机制

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

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

body部分代码:

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

(1) Child组件,里面放入三个p标签,显示name,age,sex

class Child extends React.Component{
    render(){
        return(
            

{this.props.name}

{this.props.age}

{this.props.sex}

) } }

(2)Adult组件

 class Adult extends React.Component{
    render(){
        return(
          
        )
    }
}

(3)Person组件,和Adult组件类似,这里使用了扩展运算符,可以将属性一一对应起来。

// {...this.props}扩展赋值,一一对应
class Person extends React.Component{
    render(){
        return(
            
        )
    }
}
完整js代码:

                    
                    

你可能感兴趣的:(前端,React,React,props,属性传递机制)