[ 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播放自动全屏。

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

相关文章推荐

页面重构css技巧总结篇(8.1-8.5)

1.如何让文字在容器内垂直居中? (1)方法:为容器添加line-height属性,使得line-height的值等于容器的height。 (2)代码 无标题文档 .container{ ...
  • fareise
  • fareise
  • 2016年08月07日 17:02
  • 1650

ubuntu16.04 下安装 QQ8.5 或者QQ8.1

linux 下 安装qq目前我知道的有两种方法 1.是利用deepin 维护的wine qq (CrossOver) 2.是用winetricks-zh 安装但是各有各的好处。deepin的比较稳...

移植JAVA WEB应用到gradle+cargo问题总结 win8.1q

前言: 假期重装了系统,从win10回到了8.1,环境配置等等都要重头来。这里总结我们团队将无构建工具辅助的java web项目转为gradle+cargo管理时我个人遇到的问题。 部分可能比较奇葩和...

win8.1常见问题

  • 2014年07月25日 12:50
  • 20KB
  • 下载

【jzoj5231】【NOIP2017模拟A组模拟8.5】【序列问题】 【分治】

题目大意解题思路考虑分治,统计跨国分治中心的区间的答案,从左到右枚举右端点,维护第一个左端点到分治中心max比分治中心到右端点大的位置,同理维护min,同时维护对答案的贡献即可。code#includ...

WCF基础教程(二)——解析iis8和iis8.5+VS2013发布wcf服务问题

引言   在项目中第一次接触WCF这方面的知识的时候就非常的喜欢这个东西,说不上为什么, 就是感觉WCF的出现为我们提供了很大的便利,所以自己就开始查找这方面的资料开始来 学习,所自己现在也是...

Debian 8.5 + GCC 5.4 + LLVM Clang 3.8.1 + Vim 8.0 配置YouCompleteMe 解决不能对C++代码补全的问题

一:系统安装与配置 虚拟机软件:Virtualbox 5.1.8(已安装相应扩展包) 虚拟机:Debian 8.5 64位 系统安装完成之后,用root用户登录终端(因为Debian 8默...
  • lzslywl
  • lzslywl
  • 2016年11月08日 23:13
  • 1192
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[ 8.1 - 8.5 ]周问题总结
举报原因:
原因补充:

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