react.js 父子组件数据绑定实时通讯
import React,{Component} from 'react'
import ReactDOM from 'react-dom' class ChildCounter extends Component{
render(){
return(
<div style={{border:'1px solid red'}}>
{this.props.count}
</div>
)
}
}
/*
* 大家默认规定的一些步骤,方便大家看
* 1.默认值
* 2.初始化状态
* 3.钩子函数
* 4.方法函数
* */
class Counter extends Component{
//默认属性对象
static defaultProps={
number:5
}
constructor(props){
super(props);
//获取我的初始状态
this.state={
number:props.number
}
}
//钩子函数
componentWillMount(){
console.log('组件将要挂载')
} componentDidMount(){
console.log("组件挂载完成")
} handleClick=()=>{
//this.setState方法是异步的,一个函数里面只能调用一次this.setState方法
//调用多次会合并,只执行一次
this.setState((prev,next)=>({
//上一次的状态prev
number:prev.number+1
}),()=>{
console.log("回调函数执行")
}) // this.setState({index:this.state.index+1}) }
render(){
//调用子组件ChildCounter,把当前状态值传过去
return(
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
<ChildCounter count={this.state.number}></ChildCounter>
</div>
)
}
}
//渲染到页面
ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))
react.js 父子组件数据绑定实时通讯的更多相关文章
- react.js父子组件通信
这里通过todolist的功能来说明 父组件: import React,{ Component,Fragment } from 'react'; import TodoItem from './To ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- React之父子组件之间传值
1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- react.js table组件【可以直接使用】
最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上 ...
- React.js 样式组件:React Style
点这里 React Style 是 React.js 可维护的样式组件.使用 React Native StyleSheet.create一样的样式. 完全使用 JavaScript 定义样式: ? ...
随机推荐
- Spring Boot学到的内容
Hello World:了解程序入口(创建启动类) Web程序:写Controller类(@RestController),写Controller方法(@GetMapping),maven依赖spri ...
- [转]Android TCP长连接 心跳机制及实现
背景知识 智能手机上的长连接心跳和在Internet上的长连接心跳有什么不同 Android系统的推送和iOS的推送有什么区别 几种推送的实现方式 协议 1XMPP简介 2 MQTT简介 3移动端消息 ...
- windows下常用的一些shell命令
看的视频上都是linux系统的shell命令,和windows区别很多.所以整理了windows常用的一些shell命令. 注意:并不是每个都试验过,使用时还需自己验证下. 学system和os,su ...
- Android开发精品收藏贴
各种下拉刷新效果: https://github.com/scwang90/SmartRefreshLayout
- Ubuntu docker 使用命令 系列二
1.下载官方远程仓下的镜像:sudo docker pull <docker 镜像> ,sudo docker pull centos (没有指定版本,就是下载的最新的os) 2. 下载某 ...
- 计算1至n的k次方的和
package com.ywx.count; import java.util.Scanner; /** * @author Vashon * date:20150410 * 题目:计算1至n的k次方 ...
- c++正则表达式模板库GRETA的使用
GRETA是微软研究院的一位前员工开发并开源的一个C++正则表达式库,兼容perl正则语法 官方介绍:“A fast, flexible, perl-compliant regular express ...
- resharper10 注册方法
注册工具:http://pan.baidu.com/s/1bnFjGfX 注册方法: 1 编辑Products.json文件,留下自己要注册的产品路径即可. 2 运行patch.exe 3 使用Ser ...
- js 根据指定个数切割数组
Part.1 问题 写项目时,遇到需要前端做 假分页 的问题:后端会将数据全部返回,前端自己做分页 Part.2 思路 拿到后端全部返回的数据后,按照 产品需求 进行分页,如每页显示 10 条数据为 ...
- 1、C编程预备计算机知识
一.数据类型 基本数据类型 1.整数 整形 -- int -- 4 短整型 -- short int -- 2 长整型 -- long int --8 2.浮点数(实数) 单精度浮点数 -- floa ...