react 入坑之罪
componentDidMount :生命周期在react下只调用一次,
render:比它先执行
componentWillRecvieProps(newProps) :能取到父组件的值
render(){ return } 下需要返回,不然报错
父组件传值
父组件:index
render(){
const {data} = this.state
return(
<div className="hhd">
<Tiem states={data}></Time>
</div>
)
}
子组件:Tiem
render(){
const {data} = this.props.states
return(
<div className="hhd">
{data}
</div>
)
}
子组件向父组件传值
1.函数传值
子组件:Com
water(){
this.props.addFun(newState)
}
render(){
return(
<div className="hhd"></div>
)
}
父组件:Main
waterFun(newState){
this.setState({keyDate:newState})
}
render(){
return(
<Com water={this.waterFun}></Com>
)
}
//封装一个根据时间显示7天或者七个月数据的方法
function getSeventData(now,resArr){
let arr = resArr,
let end = null;
for(let i=0;i<arr.length;i++) {
if(i==now) {
end = i;
}
}
let start = end -7;
let res = [];
if(start <0 ){
res = arr.slice(0,end)
}else{
res = arr.slice(start,end)
}
}
let M = new Date().getDate();
getSeventData(M,‘数据’)
react 入坑之罪的更多相关文章
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- react 入坑笔记(三) - Props
React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...
- react 入坑笔记(六) - 组件的生命周期
React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...
- react 入坑笔记(五) - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- react 入坑笔记(二) - State
React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 ...
- react 入坑笔记(一)
一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...
- vue2.x入坑总结—回顾对比angularJS/React的一统
从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https:// ...
- web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史
秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
随机推荐
- sql查询语句如何执行
MySQL 可以分为 Server 层和存储引擎层两部分. 查询缓存: Mysql拿到一个查询请求之后,会先查询缓存,之前执行过的语句及结果可能会以Key-Value的形式被存在缓存中,Key是查询语 ...
- Java的流
Java中的流主要是用来读写文件的.只要明确你是读文件还是写文件就可以确定使用哪种流了.读:read 写:writer 1.读文件:filereader这个类,顾名思义就知道是读文件了. 2.写文 ...
- Spring Cloud Zuul 中文文件上传乱码
原文地址:https://segmentfault.com/a/1190000011650034 1 描述 使用Spring Cloud Zuul进行路由转发时候吗,文件上传会造成中文乱码“?”.1. ...
- 下拉框click事件与搜索框blur事件的爱恨纠葛
还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...
- Laravel资源路由
Route::resource('article', 'ArticleController'); 如果我们以get的方式请求‘article’,会自动分发到ArticleController的crea ...
- SAP abap 语句、命令 语法查询备用
语句:碰到一个写一个 COLLECT语句用法 用于报表数据的合并计算,如果非数据字段值相等,那么数值字段值相加 内表可以不用排序 LOOP AT gtd_test into gth_test. COL ...
- Java程序设计第三次作业
编写“学生”类及其测试类. 5.1 “学生”类: 类名:Student 属性:姓名.性别.年龄.学号.5门课程的成绩 方法1:在控制台输出各个属性的值. 方法2:计算平均成绩 方法3:输出各个属性的值 ...
- shell编程(二)之算术运算
bash中的算术运算 +.-./.%.* 实现算术运算 1. let var=算术表达式 2. var=$[算术表达式] 3. var=$((算术表达式)) 4. var=$(expr arg1 ar ...
- 论文笔记:Deeper and Wider Siamese Networks for Real-Time Visual Tracking
Deeper and Wider Siamese Networks for Real-Time Visual TrackingUpdated on 2019-04-01 16:10:37 Paper ...
- springboot整合ActiveMQ,配置问题
1.ActiveMQ的安装和相关配置修改 去官网下载安装包解压至文件夹 双击打开 打开浏览器输入 http://127.0.0.1:8161 到此activeMQ就安装好了 2.springboot工 ...