[ 8.1 - 8.5 ]周问题总结

原创 2016年08月29日 14:25:05

一、整理总结

1.props在组件内不能修改

在做需求的过程中,有一功能为:进行点击切换。

我将‘快讯’作为 props 参数传给组件,即在组件内部通过修改了props的值来进行切换。

虽然此方式可以实现基本功能,但在本质上是不允许的,因为:es6中props为常量,不允许组件内部对其进行改变,props为只读属性。

修改为:

<button onClick={this.handleClick}>
          {this.state.cancel + this.props.text}
</button>

利用state在组件内部进行状态改变。

2.props和state的区别理解

首先props与state都是用于描述组件的显示状态,都可以用来传数据,若状态改变会重新渲染组件。

区别:

  • props类似常量,设定之后不改变;state随着用户互动而变化。
  • props是父组件传给子组件的的值,可以一直向下传递;state是组件内部的状态。

3.react中如何动态改变class

最初我的写法是:

render: function() {
  var classString = '';
  if (this.state.cancel==='取消') {
    classString += ' btn-cancel';
  }else{
    classString += ' btn-commit';
  }
  return <button className={'btn'+classString}>{this.state.cancel + this.props.text}</button>;
}

难以阅读,并且容易出错。经过优化,可以利用this.state.cancel的值进行判断,减代码量。

<button className={'btn ' + (this.state.cancel==='取消'?'cancel':'commit')} onClick={this.handleClick}>
          {this.state.cancel + this.props.text}
</button>

通过阅读 React文档,发现 React 中有一个 classSet()方法,用于改变 class。

render: function() {
  var change = React.addons.classSet;
  var classes = change({
    'btn-cancel': this.state.cancel,
    'btn-commit': !this.state.cancel
  });
  return <button className={classes}>{this.state.cancel + this.props.text}</button>;
}

4.es5与es6的编写对照

由于 moviesns项目中没有 babel转码器,所以不支持 ES6编写,只能使用 ES5 + React方式开发。列举项目中遇到的情况:

  1. 创建组件
    ES5: 

    var Button=React.createClass({
        render:function(){
          return(
            <button>
              {this.props.text}
            </button>
          )
        }
      });
      return Button;

    ES6:

    class Button extends React.Component{
        render() {
            return <button>
              {this.props.text}
            </button>;
        }
    } 
    export default Button;


      2. props属性    

  • ES5

    var Button = React.createClass({
        getDefaultProps: function() {
           return {text:'快讯'};
        },
        propTypes: {
           text:React.PropTypes.string
        },
        render: function() {
           return <button>{this.props.text}</button>;
        }
    });
    
    


  • ES6

    class Button extends React.Component{
      render() {
          return <button >{this.props.text}</button>;
      }
    }
    Button.propTypes={
      title: React.PropTypes.string
    }
    Button.defaultProps={text:'快讯'};


5.时间戳和日期如何转换

将 unix时间戳转换为2016-10-12 13:35:49格式。

我的代码是 :

var date = new Date(1476250549490);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds(); 
console.log(Y+M+D+h+m+s); 

逻辑很麻烦,容易拼接出错,后来 李泉水推荐我使用 moment.js,一个操作时间的js库。

于是修改代码,改为:

moment(1476250549490).format('YYYY-MM-DD h:mm:ss');

代码逻辑编写量减少,格式容易控制,且可读性较高。

二、了解

1.webkit-playsinline 属性

 在 <video> 标签中使用 webkit-playsinline 属性,并在IOS端用 OC 编写如下代码,设置 ' webview.allowsInlineMediaPlayback = YES '。

self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
     _webView.allowsInlineMediaPlayback =YES;
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
    [self.view addSubview: self.webView];
    [self.webView loadRequest:request];

就可禁止 IOS app 中播放网页视频默认全屏的效果。

但目前没有办法禁止 IOS Safari 中video播放自动全屏。

版权声明:本文为博主原创文章,未经博主允许不得转载。

用Eclipse MyEclipse WebLogic8.1开发第一个Web程序

用Eclipse MyEclipse WebLogic8.1开发第一个Web程序- -                                       用Eclipse+MyEclipse...
  • butian
  • butian
  • 2004年12月13日 14:06
  • 2769

QA实习第二周总结

已经实习第二周了,实际上是1周零2天,总结一下自己学到的内容,也想整理一下思路    第一周由于我们组负责的项目马上就要上线,所以导师忙的根本没空理我,我就吃吃喝喝看看文档,就这么过去了,除了看了一...
  • wangkai19952008
  • wangkai19952008
  • 2017年04月21日 19:15
  • 196

《年终总结》——2015

在大学的生活中,我们不断的拼搏,不断的前进,其实一直都在路上,我们要感谢路上的磕磕碰碰,感谢路上的坎坎坷坷,不能因为路上“坑多”我们就不走路了,不能因为“路滑”,我们就放弃自己的目标,前进吧,我的兄弟...
  • u013067402
  • u013067402
  • 2016年02月27日 23:49
  • 819

【大三上学期实训】第一周总结

我们本周商量了一下项目需求,这个项目之前是我再做的,现在新添加了三个队友,需要把项目在重新熟悉起来。 经过本次的商量总结,我们确定了新的接口文档。我是做后台的,对前端不是很熟悉,所以之前的前端写的很...
  • ITString
  • ITString
  • 2018年01月11日 18:47
  • 21

开始自己的周记,学习总结

0608-0613 本周主要在公司重装了产品,将case测完了,才发现最开始发给intern的文档是多么的重要。 学习内容主要是Python,Python的两大优势:一是学习起来不难,二是解释性脚本语...
  • qq_18989901
  • qq_18989901
  • 2015年06月13日 22:11
  • 954

html5项目总结

HTML5项目总结 总的来说,我们组能在短短的一周的时间里把项目完成,我们还是都挺开心的。 不过在此期间也有些不足之处和小小的遗憾。 毕竟第一次做项目,我也是第一次开始管理项目。所以一开始我...
  • weixin_40388697
  • weixin_40388697
  • 2017年11月30日 20:47
  • 172

实习每周总结_20161217

实习每日总结:目前工作难度低,主要是信息的检索与整理统计,完成的并不是很好。一步步来,以后要善于归纳(多方面思考解决方法,找出最有效的);一周好快,下一周继续努力。...
  • a1260157543
  • a1260157543
  • 2016年12月18日 19:56
  • 295

8.1 - 8.5 标准IO库

本章大意 介绍了标准IO库即其相关的使用 细节摘录 0. 简单的IO控制流层次 1. 复制,赋值均不能够为IO对象 2. 三种刷新缓冲区的方法 a flush ends endl操纵符 b uni...
  • u010240236
  • u010240236
  • 2013年05月06日 10:54
  • 278

实训总结_ java班 周

经过了在保定和在北京的实训,我真的明白了很多!     不光是在专业知识方面,更多的是让我明白了,自己将来的路还很长,自己目前懂得的还很少,以后的生活还要自己努力拼搏。     在实训中我深切...
  • redarmy_chen
  • redarmy_chen
  • 2012年07月18日 08:42
  • 7319

Qt 学习总结

将窗体显示在屏幕中心: 在窗体的构造函数中加入以下代码 QDesktopWidget *desktop = QApplication::desktop(); this->move((desktop->...
  • tongxinhaonan
  • tongxinhaonan
  • 2015年05月08日 09:01
  • 258
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[ 8.1 - 8.5 ]周问题总结
举报原因:
原因补充:

(最多只允许输入30个字)