欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React父子组价传值解析

程序员文章站 2022-04-19 10:28:14
react父子组价传值 1:在子定义属性 子组件通过this.props.msg获取值 2:子组件调用父组件方法; //获取父组件的值 {this.props.title} //调用父组件的run方...
react父子组价传值

1:在子定义属性

子组件通过this.props.msg获取值

2:子组件调用父组件方法;

//获取父组件的值

{this.props.title}

//调用父组件的run方法

调用news父组件的run方法

//获取父组件的getdata方法

获取news组件的getdata方法

总结: 通过设置子组件属性,设置对应的值与方法;然后通过props进行方法调用与值获取

子组件获取父组件的值或方法: props

1:调用子组件的时候指定ref的值

通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )

alert(this.refs.header.state.msg); //获取子组件的数据

通过props调用父类方法传值

子组件给父组件传值

总结:

子组件指定ref,获取子组件实例,从而获取子组件的值

通过porps调用父组件方法进行传值