ReactJs 开发笔记

第一个参与的ReactJs项目

JS

for each 遍历

// let  a of collection 用于遍历集合类
let targetTabs = [];
for (let t of tabs) {
    targetTabs.push({text: t.activityName});
}

// let f in object 用于遍历类成员
for (let field in object) {
   console.log(object[field]);  
}

解析显示文本内容中的html标签

    // 使用jqueryObject.html("<a>view</a>") 来动态插入显示
    componentDidMount() {
        let {parseHtml, content} = this.props
        let {contentDiv} = this.refs;

        if (parseHtml) {
            // 使用ref="contentDiv" 取得jquery对象
            $(contentDiv).html(content);
        }
    }


    render() {
        var {content, parseHtml} = this.props;
        return
            <div className={styles.content} ref="contentDiv">
                {parseHtml ? "" : content}
            </div>
    }                

截取数值小数点后两位

    // 数值型内容, 需先使用parseFloat转换为float对象, 再调用toFixed(2)
    // 否则如果是字符型数值, 将会异常
    let result = this.isNum(indicatorValue) 
            ? parseFloat(indicatorValue).toFixed(2) 
            : indicatorValue;

    // 判断变量是否是数值型
    isNum(val) {
        // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
        if (val === "" || val == null || val == undefined) {
            return false;
        }

        if (!isNaN(val)) {
            return true;
        } else {
            return false;
        }
    }

对数据集合进行分组

import _ from 'lodash';

// 使用lodash 构建每6个为一组的二维数组
let groups = _.chunk(itemViews, 6);
     return groups.map((item) => {
           return <div>{item}</div>
});
    

计算页面剩余高度, 动态改变组件高度, 使组件布局达到android match_parent的效果

    // componentDidUpdate 实体Dom已可用
    componentDidUpdate(prevProps, prevState) {
        if (!this.inited) { // 只初始化一次
           let {fixtable} = this.refs;
           // 整个界面高度 - 组件top位置 = 组件填满剩余空白位置
           // $(fixtable).offset() 相对于屏幕左上角的值
           let height = $(window).height() - $(fixtable).offset().top;
           // 设置组件高度
           $(fixtable).height(height);

           this.inited = true;        
        }
    }

保存恢复可滚动组件的滚动位置

     let x = $("table")[0].style.left.replace("px", "");
     let y = $("table")[0].style.top.replace("px", ""); // 获取高度, 截掉'px'单位
    // 转换成float开, 不然后数据相加会变成文本内容合并
     cacheObj.scrollX = parseFloat(x);  // 保存
     cacheObj.scrollY = parseFloat(y);    

componentDidMount() {
    let {scrollX, scrollY} = this.props;
    // 用于初始化滚动条位置
    this.curX = scrollX;
    this.curY = scrollY;
    this.renderUI();
}

renderUI(){
    var {fixmain} = this.refs;
    $(fixmain).css({"top": this.curY+"px", "left": this.curX+"px"});
}