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. 画多边形form并填充背景色(可以实现圆角边框 有锯齿)

    public Form1() { InitializeComponent(); this.BackColor = ColorTranslator.FromHtml("#F7F1F1" ...

  2. MySQL_ALTER命令

    当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 1)修改表名:表名可以在数据库中唯一标识一个table 命令格式:ALTER TABLE 旧名 RENAME 新名 ...

  3. 施密特正交化 GramSchmidt

    施密特正交化 GramSchmidt 施密特正交化的原名是 Gram–Schmidt process,是由Gram和schmidt两个人一起发明的,但是后来因为施密特名气更大,所以该方法被简记为施密特 ...

  4. 02:安装 Kerberos

    1.1 环境介绍   参考博客:https://www.cnblogs.com/xiaodf/p/5968178.html https://www.douban.com/note/701660289/ ...

  5. Elasticsearch-搭建自己的搜索系统

    参考链接: https://blog.csdn.net/weixin_42730079/article/details/81113806 https://www.cnblogs.com/dreamro ...

  6. redhat7 配置使用centos的yum源

    新安装了redhat7.安装后,登录系统,使用yum update 更新系统.提示: This system is not registered to Red Hat Subscription Man ...

  7. RESTClient的基本使用

    1.本人使用的是火狐浏览器,其他浏览器应该也有(没试过),安装插件RESTClient. 2.1.打开RESTClient:

  8. ajax的一些相关

    1.AJAX = Asynchronous(异步的) JavaScript and XML AJAX是能不刷新整个网页的前提下,更新内容.通过少量的数据交换,达成局部页面刷新的效果. 而form表单提 ...

  9. Eclipse使用Maven,创建项目出现:Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resour

    使用maven创建简单的项目时候经常会遇到 Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resource ...

  10. 初学者易上手的SSH-spring 01控制反转(IOC)

    这章开始学习SSH中最后的一个框架spring.Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用. 首先就来学习一下I ...