1.iconfont應用:

　　a.正常用法如下

<span className=‘iconfont‘ > iconfont的代碼，例如:&#xe6e8; </span>

　　b.react不能動態渲染iconfont標簽,需如下處理,icon為形參

<i dangerouslySetInnerHTML={{__html: icon}} className={‘iconfont‘} />

　　c.引入項目中：需要在項目中復制iconfont的地址代碼,類似如下的地址，官網生成

@font-face {
  font-family: ‘iconfont‘;  /*
 
 project id 413196 */
  src: url(‘//at.alicdn.com/t/font_413196_97fora1hdl81if6r.eot‘);
  src: url(‘//at.alicdn.com/t/font_413196_97fora1hdl81if6r.eot?#iefix‘) format(‘embedded-opentype‘),
  url(‘//at.alicdn.com/t/font_413196_97fora1hdl81if6r.woff‘) format(‘woff‘),
  url(‘//at.alicdn.com/t/font_413196_97fora1hdl81if6r.ttf‘) format(‘truetype‘),
  url(
 
‘//at.alicdn.com/t/font_413196_97fora1hdl81if6r.svg#iconfont‘) format(‘svg‘);
}

2.排序方法

let dataList=["3","3","45"];
dataList.sort(function(a,b){
   return a-b 
})
升序方法

3.獲取節點屬性

需要給DOM節點增加ref屬性

4.下拉加載更多數據事件

步驟：a.在滾動滾動div上增加ref屬性

<div ref={data=>this.content=data} ></div>

　　　b.compoonentDidMount中監聽滾動事件,並調用判斷事件

componentDidMount() {   // 加載渲染完成
        if (this.contentNode) {
            this.contentNode.addEventListener(‘scroll‘,this.onScrollHandle.bind(this));
        }
    }      

　　　c.判斷滾動事件是否觸發

//監聽滾動條位置
    onScrollHandle(event) {
        const clientHeight = event.target.clientHeight;
        const scrollHeight = event.target.scrollHeight;
        const scrollTop = event.target.scrollTop;
        const isBottom = (clientHeight + scrollTop === scrollHeight);
        isBottom?setTimeout(this.lazy(),20000):"";
    }

5.父組件向子組件傳值的方式

父組件.js
　　html:
　　　　<子組件 parent={(data)=>this.parentEvent(data)} />
　　js:
　　　　parentEvent(data){
  　　　　//這裏接收到的data為子組件傳給父組件的
　　}

子組件.js
　　html:
　　　　<div onClick={this.click.bind(this)}></div>
　　js:
　　　　click(){
    　　　　this.props.parent(data)//這裏的data是傳給父組件的        
　　　　　　}

6.字符串的基礎操作

函數：split() 
功能：使用一個指定的分隔符把一個字符串分割存儲到數組 
例子： 
str=”jpg|bmp|gif|ico|png”; 
arr=theString.split(”|”); 
//arr是一個包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的數組 

函數：join() 
功能：使用您選擇的分隔符將一個數組合並為一個字符串 
例子：
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”); 
var portableList=myList.join(”|”); 
//結果是jpg|bmp|gif|ico|png 

函數：substring() 
功能：用於提取字符串中介於兩個指定下標之間的字符
例子：
“ABCDEF”.substring(0,2) //結果為su

函數：indexOf() 
功能：返回字符串中匹配子串的第一個字符的下標 
"ABCDEF".indexOf("A")  //結果為0
"ABCDEF".indexOf("BC")  //結果為1

函數：reverse()
功能：用於顛倒數組中元素的順序
“05.03.2018”.split(".").reverse().join(".")  //結果為2018.03.05

7.正則驗證

let reg=/判斷格式/
reg.test(需要判斷的內容)
返回個布爾值

8.antdUI組件

　　a.DatePicker如果需要動態綁定數值的話，不能為空，瀏覽器會報錯;需要對當前是否有值做判斷，如果沒值，需給個空的字符串，瀏覽器會報警告（待解決）;

　　b.DatePicker下的RangePicker，沒值的時候可以傳空數組，可解決；

航遇項目react踩坑