React组件间通讯传值实现详解
组件的props:
1.组件是封闭的,要接收外部数据应该通过props来实现。
2.props的作用,接收传递给组件的数据。
3.传递数据:给组件标签添加属性
4.接收数据:函数组件通过参数props接收数据,类组件通过this.props接收数据。
特点:
1.可以给组件传递任意类型的数据。
2.props是只读对象,只能读取属性的值,不能修改对象。
3.使用类组件时,如果写了构造函数,应该将props传递给super(),否则无法在构造函数中获取props。
父->子传值
import React, { Component } from 'react' import ComSmall from './ComSmall' export default class ComBig extends Component { constructor(){ super() this.state={ info:"天冷了要加衣" } } render() { return ( <div>我是父组件 {/* 注册子组件 ,通过msg传递给子组件*/} <ComSmall msg={this.state.info}></ComSmall> </div> ) } }
import React, { Component } from 'react' export default class ComSmall extends Component { constructor(props){ // 此处不传props super(props) this.state={ } // console.log(this.props);此处打印的是undefined,传递后打印的是数据 } render() { return ( <div>我是子组件 {/* 接收父组件传值 */} {this.props.msg} </div> ) } }
子->父传值
利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。
import React, { Component } from 'react' export default class ComSmall extends Component { constructor(){ super() this.state={ msg:"给你买了一部手机" } } sendMsg(){ // 子组件调用父组件传递过来的回调函数 this.props.getMsg(this.state.msg) } render() { return ( <div>我是子组件 <button onClick={()=>this.sendMsg()}>给父组件传值</button> </div> ) } }
import React, { Component } from 'react' import ComSmall from './ComSmall' export default class ComBig extends Component { constructor(){ super() this.state={ data:"" } } getChindMsg=(val)=>{ // console.log("获得子组件传过来的值:",val); this.setState({ data:val }) } render() { return ( <div>我是父组件 <p>获得子组件传过来的值:{this.state.data}</p> {/* 将回调函数传递给子组件 */} <ComSmall getMsg={this.getChindMsg}></ComSmall> </div> ) } }
到此这篇关于React组件间通讯传值实现详解的文章就介绍到这了,更多相关React组件通讯传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-09-09如何应用 SOLID 原则在 React 中整理代码之开闭原则
React 不是面向对象,但这些原则背后的主要思想可能是有帮助的,在本文中,我将尝试演示如何应用这些原则来编写更好的代码,对React SOLID原则开闭原则相关知识感兴趣的朋友一起看看吧2022-07-07
最新评论