航遇项目react踩坑

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踩坑

猜你喜欢