[ 8.1 - 8.5 ]周问题总结

一、整理总结

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