React笔记-组件通信(六)
React笔记-组件通信(六)
props概念
props是组件之间通讯的纽带
props也是组件中内置的一个属性
通过父级组件传入 在类组件里 可以直接通过this.props获取
注意:
props是不可变的(只读) 修改需要从传值的组件中修改
props改变会使视图重新渲染
组件传值
父传子
在父组件里的子组件标签上定义属性 在子组件里使用props接收
// 父组件
import React from "react";
import LearnChild from './learn-child'
export default class LearnParent extends React.Component {
render () {
return (
<div>
{/* 父类中的子标签中写上属性 在子类中通过props接收 */}
<LearnChild name='bob' age='18'></LearnChild>
</div>
)
}
}
// 子组件
import React from "react";
export default class LearnChild extends React.Component {
render () {
return (
<div>
{/* 子类中通过this.props接收父类传值(子类标签属性) */}
<div>{this.props.name} --- {this.props.age}</div>
</div>
)
}
}
子修改父值
子props接收父的一个方法 父通过这个方法改变父类中的值 子每次调用接收到的父的方法 父中方法都会执行 间接改变值
注意:
子proprs接收到父传的值不能在子中被修改 子中只读
// 父组件
import React from "react";
import LearnChild from './learn-child'
export default class LearnParent extends React.Component {
state = {
age : 18
}
add (item) {
this.setState({
age : ++item
})
}
render () {
console.log(this.state.age)
return (
<div>
{/* 父类中的子标签中写上属性 在子类中通过props接收 */}
<LearnChild name='bob' age={this.state.age} ageChange={(item) => this.add(item)}></LearnChild>
</div>
)
}
}
// 子组件
import React from "react";
export default class LearnChild extends React.Component {
addAge (item) {
console.log(this.props.age)
this.props.ageChange(item)
}
render () {
return (
<div>
{/* 子类中通过this.props接收父类传值(子类标签属性) */}
<div>{this.props.name} --- {this.props.age}</div>
<button onClick={() => this.addAge(this.props.age)}>age+1</button>
</div>
)
}
}
子传父
父组件给子组件传入一个方法 子组件接收这个方法 在对应的事件里触发接收到的方法 并且可以传参
子传父本质上来说就是通过观察者去触发了一个回调函数
// 父组件
import React from "react";
import LearnChild from './learn-child'
export default class LearnParent extends React.Component {
add (item) {
console.log('父类接收到: ' + item)
}
render () {
console.log(this.state.age)
return (
<div>
<LearnChild name='bob' age={this.state.age} ageChange={(item) => this.add(item)}></LearnChild>
</div>
)
}
}
// 子组件
import React from "react";
export default class LearnChild extends React.Component {
addAge (item) {
this.props.ageChange(item)
}
render () {
return (
<div>
{/* 子类中通过this.props接收父类传值(子类标签属性) */}
<div>{this.props.name} --- {this.props.age}</div>
<button onClick={() => this.addAge('子传父')}>age+1</button>
</div>
)
}
}
组件嵌套
组件标签中间如果有其他组件或者标签，则在组件内使用this.props.children展示
//父组件
import React from "react";
import Component from "./component";
import Content from "./Content";
export default class LearnPropsChild2 extends React.Component {
render() {
return (
<div>
<Component>
{/* 可以放标签 */}
<div>在组件内部的内容</div>
{/* 也可以直接放组件 */}
<Content></Content>
</Component>
</div>
);
}
}
// 子组件
import React from "react";
export default class Component extends React.Component {
render() {
return (
<div>
<div>头部</div>
{/* 通过children展示 */}
{this.props.children}
<div>底部</div>
</div>
);
}
}
受控组件
在HTML中 表单标签 值通常是根据用户输入来更新 在React可变状态通常放在组件的state中 并且只能使用setState更新
如果这个组件里面存放着一些表单控件我们也可以手动的进行组件更新 那么以这种由React控制的输入表单元素而改变其值的方式 称为受控组件
// 实例
import React from 'react'
export default class MyInput extends React.Component {
state = {
value: 0
}
handleChange = (event)=>{
this.setState({
value: event.target.value
})
}
render(){
return(
<div>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</div>
)
}
}
受控组件更新state流程
- 可以通过初始state中设置表单的默认值
- 每当表单的值发生变化时，调用onChange事件处理器
- 事件处理器通过事件对象event拿到改变后的状态，并更新组件的state
- 一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新
状态提升(同级传值)
概念
多个组件需要共享state数据时 将这些数据提升到父组件中 这就是'状态提升'
这么做的原因
当多个组件渲染同一数据 但是状态各不相同时 这些组件数据需要同步变化 但是组件之间不能相互作用
例如
官网例子: 一个组件用华氏度展示数据A 另一个组件用摄氏度展示数据A 数据相同 但是表现形式不同 并且当数据A被修改时 两个组件需要根据不同展现形式同时变化
import React from "react";
class Son extends React.Component {
// 1.获取组件自身input值 并传给父组件
change(event) {
this.props.onShow(event.target.value);
}
render () {
return (
<div>
<input type="text" onChange={(event) => this.change(event)} value={this.props.data}/>{this.props.unit}
</div>
)
}
}
export default class NewState2 extends React.Component {
state = {
m : 0,
cm : 0
}
changeM(m) {
// 2.接收子组件m传过来的实参 并根据实参改变另一个组件中的数据 达成同步变化
this.setState({
m : m,
cm : m * 100
})
}
changeCM(cm) {
// 2.接收子组件cm传过来的实参 并根据实参改变另一个组件中的数据 达成同步变化
this.setState({
m : cm / 100,
cm : cm
})
}
render () {
return (
<div>
<Son unit='M' onShow={(m) => this.changeM(m)} data={this.state.m}></Son>
<Son unit='CM' onShow={(cm) => this.changeCM(cm)} data={this.state.cm}></Son>
</div>
)
}
}
React笔记-组件通信(六)的更多相关文章
- react的组件通信
react的组件通信 1.父组件传子组件 import React, {Component} from 'react'class Father extends Component{ render() ...
- React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...
- React中组件通信的几种方式
//segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...
- 5.React中组件通信问题
1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...
- react 父子组件通信
import React from 'react'; import B from './B'; class A extends React.Component{ state = { msg:'我来自于 ...
- Vue学习笔记-组件通信-子传父（自定义事件）
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中.我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成.什么时候需要自定义事件呢?当子组件需要向父组件传递 ...
- Vue学习笔记-组件通信-父传子（props中的驼峰标识）
在组件中,使用选项props来声明需要从父级接收到的数据.props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称.方式二:对象,对象可以设置传递时的类型,也可以设置默认值等. & ...
- React 入门学习笔记整理（六）—— 组件通信
1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- react初探（二）之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
随机推荐
- ssh反向代理树莓派+motion，实现公网远程视频监控
注意:本文公网远程监控部分需要借助有公网IP的云服务器进行ssh反向代理. 一.借助motion实现内网的视频监控 准备 插上摄像头,然后输入ls /dev/video*命令检查是否识别了摄像头 安装 ...
- 实验七：基于REST API的SDN北向应用实践
(一)基本要求 编写Python程序,调用OpenDaylight的北向接口实现以下功能 (1) 利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight: (2) 下发指令删除s1 ...
- 使用php将字典格式的字符串转为array
例: 原字符串为 $a = '{"errcode":0,"errmsg":"ok","msgid":1472671765 ...
- 执行sql语句,查询sql版本
SELECT VERSION();
- element表格样式的修改
修改表格头部背景 .el-table th{ background: #f00; } 修改表格行背景 .el-table tr{ background: #f00; } 修改斑马线表格的背景 .el- ...
- （Winform程序带源码） 弹出输入框和获取输入框的值
弹出输入框和获取输入框的值: private void button1_Click(object sender, EventArgs e) { string returnValue = Microso ...
- SpringBoot笔记--配置文件分类+yaml相关知识+读取配置文件内容
配置文件 要是需要使用自己的配置替换默认配置时,需要使用后缀名为application.properties或者application.yml(application.yaml)进行配置 当然,几个文 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——18.外设和IO
学习操作系统原理最好的方法是自己写一个简单的操作系统. 一.外设和I/O接口 前面我们介绍过冯·诺依曼结构包含5部分,其中输入设备和输出设备统称为外部设备,简称外设.常见的外设有鼠标.键盘.显示器.硬 ...
- 万字血书Vue—路由
多个路由通过路由器进行管理. 前端路由的概念和原理 (编程中的)路由(router)就是一组key-value对应关系,分为:后端路由和前端路由 后端路由指的是:请求方式.请求地址和function处 ...
- Prometheus性能调优-什么是高基数问题以及如何解决?
背景 近期发现自己实验用的 Prometheus 性能出现瓶颈, 经常会出现如下告警: PrometheusMissingRuleEvaluations PrometheusRuleFailures ...