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

最新推荐文章于 2025-02-16 20:04:02 发布

清颖~

最新推荐文章于 2025-02-16 20:04:02 发布

阅读量1.9k

点赞数 2

分类专栏：前端 React 文章标签： React props 属性传递机制

本文链接：https://blog.youkuaiyun.com/aaqingying/article/details/99173755

版权

前端同时被 2 个专栏收录

98 篇文章

订阅专栏

React

30 篇文章

订阅专栏

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"))