关闭

[ 8.1 - 8.5 ]周问题总结

标签: web前端es6focusjavascript
169人阅读 评论(0) 收藏 举报
分类:

一、整理总结

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23487次
    • 积分:529
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:16篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论