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入坑之旅(一)不 ...
随机推荐
- 小容量的byteBuffer 读取大文本
利用死循环和判断是否 读到0个字节,便能判断是否读取完成,但它存在如下问题,如果输入是中文的话,可能没有读取完中文的全部3个字节,导致乱码.如果数据足够随机,这样的情况肯定会出现的 @Test pub ...
- Django路由控制
本文目录 一 Django中路由的作用 二 简单的路由配置 三 有名分组 四 路由分发 五 反向解析 六 名称空间 七 django2.0版的path 回到目录 一 Django中路由的作用 URL配 ...
- loj 3090 「BJOI2019」勘破神机 - 数学
题目传送门 传送门 题目大意 设$F_{n}$表示用$1\times 2$的骨牌填$2\times n$的网格的方案数,设$G_{n}$$表示用$1\times 2$的骨牌填$3\times n$的网 ...
- HTML与CSS的一些知识(二)
续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器 一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...
- company_credit
/** * Created by wu-yj on 2016/5/6. */ import java.sql.{Connection, DriverManager, PreparedStatement ...
- 关于win10触控板两指点击无效的问题
一.前言 最近发现公司的本本两指点击触控板没有反应,单指和三指点击触控板都是正常的.网上也搜了 一些解决的方法,最开始因为没有明确自己的触控板是Synaptics还是Elan的,导致没有解决.首先我们 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- 深入理解Java虚拟机(第二版)中《长期存活对象将进入老年代》的实践
- [python]Python代码安全分析工具(Bandit)
简介: Bandit是一款Python源码分析框架,可用于Python代码的安全性分析.Bandit使用标准库中的ast模块,将Python源码解析成Python语法节点构成的树.Bandit允许用户 ...
- js 上下滚动加停顿效果,js 跑马灯加停顿效果
<div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...