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入坑之旅(一)不 ...
随机推荐
- Thinking in work
Scheduler? Realtime? sure SCI? Power supply and ECU life. how to assure? EMC?
- 含服务端,客户端,数据库的注册/登录/聊天/在线/离线查看的聊天demo
用websocket,mysql,node的写了一个简单聊天的demo 实现了: 注册,登陆功能: 聊天信息广播: 在线/离线状态的查看: 服务端: 主要引用http,fs,mysql,socket. ...
- Android5.0新特性之——按钮点击效果动画(涟漪效果)
Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...
- 破解360doc个人图书馆网站的右键、复制方法
chrome浏览器如下做法: 右上角菜单按钮→设置→显示高级设置→隐私设置下的 内容设置按钮→javascript下的管理例外情况→添加 [*.]360doc.com 设置为禁止 →完成
- 王之泰201771010131《面向对象程序设计(java)》第十五周学习总结
第一部分:理论知识学习部分 第13 章 部署应用程序 1.jar文件 a) java 程序的打包:编译完成后,员 将.class 文件压缩打包为 .jar 文件后, GUI 界面 程序就可以直接双击图 ...
- arch安装以及配置记录
设置ip和网关 ifconfig eth0 10.82.16.233 netmask 255.255.255.0 route add default gw 10.82.16.1 或者 ip addr ...
- 重新使用linux的一些事情
workstatin版基本上已经有了常用的那些功能了, 代码开发完全足够了, 不需要再去加什么东东了 httpd已经有了, 结构: /usr/lib: 库,放置的是 (操作)系统的静态库, 大多数是直 ...
- InvalidArgumentError: ConcatOp : Dimensions of inputs should match: shape[0] = [1,136,240,64] vs. shape[1] = [1,135,240,64]
初始输入图片大小为1600*1200,设置的输入网络的最大测试图片大小为1600*1200相当于scale =1 ,运行没有问题.之后输入图片大小为1920*1080,测试图片大小为1920*1080 ...
- RFS常见问题
一.DatabaseLibrary 库遇到的问题:1,连接mysql库,查询语句带有中文,报FAIL UnicodeEncodeError: 'latin-1' codec can't encode ...
- [python]Python代码安全分析工具(Bandit)
简介: Bandit是一款Python源码分析框架,可用于Python代码的安全性分析.Bandit使用标准库中的ast模块,将Python源码解析成Python语法节点构成的树.Bandit允许用户 ...