首页 > 其他 > 详细

react中的组件嵌套

时间:2019-09-23 22:40:35      阅读:143      评论:0      收藏:0      [点我收藏+]

组件嵌套:将子组件以标签的形式写在父组件的模板中。

组件之间的通信

子传父

子传父

通过函数层层传递

 技术分享图片

 

 

 技术分享图片

 

 

点击h3 执行fn fn中去执行onlick函数而onlick是来自于props的,props中的onlick又是ff,转移去执行ff把参数赋给a 修改了a的值。

父传子

 

.使用props传值

 

具体实现

 

import React, { Component } from ‘react‘;

/**父组件 */
export default class Parent extends Component {
    state = {
        msg: 1
    }
    render() {
        return (
            <div onClick={() => this.setState({ msg: this.state.msg + 1 })} >
                {/* 子组件 */}
                <Child msg={"传递给子组件的消息:" + this.state.msg.toString()} />
            </div>
        );
    }
}

/**子组件 */
class Child extends Component {
    // 默认的props 可写可不写
    static defaultProps = {
        msg: 1
    }
    render() {
        return (
            <div>
                {/* 通过props传递过来的参数 */}
                {this.props.msg}
            </div>
        )
    }
}

技术分享图片

 

react中的组件嵌套

原文:https://www.cnblogs.com/yangjingyang/p/11574802.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!