组件间的通信
时间:2021-07-20
本文章向大家介绍组件间的通信,主要包括组件间的通信使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
组件之间的通信
每个组件之间都是独立的,但是它们之间也存在关系,存在关系就需要通信;
组件之间的通信也会看组件之间是什么关系,这里先介绍只基于React父子组件之间的简单通信:
在React中父子组件通信是基于一个属性props,子组件会从父组件那里接收属性,函数等;
01-props传递属性
父组件
class Father extends Component {
constructor(props) {
super(props)
this.state = {
name: "张三",
age: 19,
height: 1.88,
}
}
render() {
return (
<div>
<Child name={this.state.name} age={this.state.age} height={this.state.height} />
</div>
)
}
}
子组件
function Child(props) {
const { name, age, height } = props;
return (
<div>
<div>名字:{name} 年龄:{age} 身高:{height}</div>
</div>
)
}
我们只需要在使用组件的时候往‘里面’塞值就行了,但是有个注意点,有些属性是不归props管的,例如:ref,key等,这些属性是不会随着props向下传递的;
02-props传递函数
上面我们讲解了props传递属性,props传递函数是让父子组件相互之间响应的关键;
简单讲下业务逻辑:父组件有一个属性counter,这个属性会子组件里面的button点击而增加
父组件
class App extends Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
}
increment() {
this.setState({
counter: ++this.state.counter
})
}
render() {
return (
<div>
<p>{this.state.counter}</p>
{/* 记住需要绑定this,其他的都和基本数据类型相同*/}
<Child increment={e => this.increment()}></Child>
</div>
)
}
}
子组件:
function Child(props) {
const {increment} = props;
return (
<button onClick={increment}>+</button>
);
}
注意一下this的绑定就行了
03-props传递时的类型检测
在react脚手架里面集成了prop-types这个模块;
直接引用就完事了
import PropType from "prop-types"
// 此时的Child组件是函数式组件
// 为Child的props进行类型检测
Child.propTypes = {
// isRequired是将这个属性置为必须传入的
name: PropType.string.isRequired,
age: PropType.number,
height: PropType.number,
names: PropType.array,
};
// 为Child组件添加默认值,并且即使设置了isRequired也不会报警告
Child.defaultProps = {
name: "lsq",
age: 18,
height: 1.84,
names: ["小闯", "小猛", "小攀"],
};
类组件直接在类组件内部添加static
export default class App extends Component {
...
static propTypes = {...}
static defaultProps = {...}
...
}
至于其他的组件通信,我们后面再讲
完整代码,请到git仓库找
原文地址:https://www.cnblogs.com/coderLsq/p/15037188.html
- velocity模板引擎学习(1)
- mybatis 3.x 缓存Cache的使用
- XStream、JAXB 日期(Date)、数字(Number)格式化输出xml
- mac: vmware fusion中cent os启动假死的解决办法
- java:hibernate + oracle之坑爹的clob
- 启用WCF NetTcpBinding的共享端口
- asp中的md5/sha1/sha256算法收集
- UE4从零搭建CF游戏关卡(蓝图篇)
- 通用的序列号生成器库
- 利用Geneva开发SOA的安全模型
- STOMP协议介绍
- ADO.NET实体框架连接串引发的异常:Unable to load the specified metadata resource
- Mono产品生命周期
- WordPress免插件仅代码实现文章归档模板 II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在CentOS7上安装开源Verilog仿真工具EpicSim
- 【CS学习笔记】27、applet渗透测试手法
- Python-WSGI接口
- CentOS7-Nginx配置Let's-Encrypt-SSL证书
- CentOS7-Nginx编译安装
- 总被审稿人提起的多重假设检验校正是什么?
- Python网络编程
- 读一本书 | systemverilog之内建数据类型
- 实战解读ASP.NET Core身份认证
- 读一本书 | systemverilog之内建数据类型(下)
- 面向对象有限元编程|节点类
- 面向对象有限元编程|抽象
- Python多线程
- Python描述器
- Spring Cloud with Kubernetes 之 Config Maps