react 常用技术

react 常用技术

(1)过滤

/***
     * 获取当前用户信息,判断是否是应用管理员
     * @returns {*}
     */
    getCurrentUser() {
        return this.data.members.filter((item) => {
            return item.userId == window.mobileStoreConfig.userId;
        })[0];
    }

getDataItem(arr, id) {
        return arr.filter((item) => {
            return item.appId == id;
        })[0];
    }

export function getIconUrl(arrUrls, type) {
	let url = arrUrls.find((url) => url.imgType == type);
	if(url && url.imgUrls) {
      return url.imgUrls[0].url;
	}
	return '';
}

export function getPicUrls(arrUrls, type) {
	let url = arrUrls.find((url) => url.imgType == type);
	if(url && url.imgUrls) {
		return url.imgUrls;
	}
	return [];
}

(2)强制修改作用域

使用bind,类似于jQuery的proxy

closeOthers(userInfo){
        this.SwipeViewList.map(function(item,index) {
            if((!userInfo)||(item!=userInfo.swipeKey)){
                this.refs[item].close();
            }
        }.bind(this));

    }

let itemRenderer=this.itemRenderer.bind(this);

(3)遍历

let content=this.data.members.map(function(item,index) {
            // console.log('index:'+index)
           
            return itemRenderer(index);
        });
        if(con

(4)获取dom节点

引入:import React from "React";

import ReactDOM from "react-dom";

let swipeListDiv=ReactDOM.findDOMNode(this.refs.scrollDiv);
let swipeParent=swipeListDiv.childNodes[1];
        let childrenSwipeOptions=swipeParent.childNodes;

closeOthers(userInfo){
        this.SwipeViewList.map(function(item,index) {
            if((!userInfo)||(item!=userInfo.swipeKey)){
                this.refs[item].close();
            }
        }.bind(this));

    }

 (5)使用空格

不能直接使用"& n b s p ;"

let name=userInfo.name;
        if(name){
            name=omitTooLongString(name,6,true);
        }else{
            name=<span>&nbsp;</span>;
        }

(6)在属性上拼接字符串

 

(7)字符串中使用变量

const prefix = `${MOBILE_STORE_PROTOCOL}${MOBILE_STORE_HOST}`;

(8)对用户输入进行URL编码

let users = encodeURIComponent(params.users);
    let appName = encodeURIComponent(params.appName);