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 入坑之罪的更多相关文章

  1. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  2. react 入坑笔记(三) - Props

    React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...

  3. react 入坑笔记(六) - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  4. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  5. react 入坑笔记(二) - State

    React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 ...

  6. react 入坑笔记(一)

    一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...

  7. vue2.x入坑总结—回顾对比angularJS/React的一统

    从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https:// ...

  8. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  9. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. Thinking in work

    Scheduler? Realtime? sure SCI? Power supply and ECU life. how to assure? EMC?

  2. 含服务端,客户端,数据库的注册/登录/聊天/在线/离线查看的聊天demo

    用websocket,mysql,node的写了一个简单聊天的demo 实现了: 注册,登陆功能: 聊天信息广播: 在线/离线状态的查看: 服务端: 主要引用http,fs,mysql,socket. ...

  3. Android5.0新特性之——按钮点击效果动画(涟漪效果)

    Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...

  4. 破解360doc个人图书馆网站的右键、复制方法

    chrome浏览器如下做法: 右上角菜单按钮→设置→显示高级设置→隐私设置下的 内容设置按钮→javascript下的管理例外情况→添加 [*.]360doc.com 设置为禁止 →完成

  5. 王之泰201771010131《面向对象程序设计(java)》第十五周学习总结

    第一部分:理论知识学习部分 第13 章 部署应用程序 1.jar文件 a) java 程序的打包:编译完成后,员 将.class 文件压缩打包为 .jar 文件后, GUI 界面 程序就可以直接双击图 ...

  6. arch安装以及配置记录

    设置ip和网关 ifconfig eth0 10.82.16.233 netmask 255.255.255.0 route add default gw 10.82.16.1 或者 ip addr ...

  7. 重新使用linux的一些事情

    workstatin版基本上已经有了常用的那些功能了, 代码开发完全足够了, 不需要再去加什么东东了 httpd已经有了, 结构: /usr/lib: 库,放置的是 (操作)系统的静态库, 大多数是直 ...

  8. 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 ...

  9. RFS常见问题

    一.DatabaseLibrary 库遇到的问题:1,连接mysql库,查询语句带有中文,报FAIL UnicodeEncodeError: 'latin-1' codec can't encode ...

  10. [python]Python代码安全分析工具(Bandit)

    简介: Bandit是一款Python源码分析框架,可用于Python代码的安全性分析.Bandit使用标准库中的ast模块,将Python源码解析成Python语法节点构成的树.Bandit允许用户 ...