第一个参与的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"});
}