航遇项目react踩坑

时间：2023-03-10 04:11:06
航遇项目react踩坑

1.iconfont应用:

　　a.正常用法如下

<span className='iconfont' > iconfont的代码，例如: </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如果需要动态绑定数值的话，不能为空，浏览器会报错;需要对当前是否有值做判断，如果没值，直接赋值null;

　　b.DatePicker下的RangePicker，航遇项目react踩坑没值的时候可以传空数组，可解决；

9.对象扩展和数组扩展

数组扩展，示例如下:

let arr1=[1,2,3,4]

let arr2=[a,b,c]

let newArr=[...arr1,...arr2]//[1,2,3,4,a,b,c]

对象扩展,示例如下：

let obj1={a:1,b:2,c:3}

let obj2={d:2,e:3,a:45}

Object.assign(obj1,obj2)//{a:45,b:2,c:3,d:2,e:3}

10.当字符串中有需要解析的html字符串时

let a="<span "+">"+"aaaaa"+"</span>";

<p dangerouslySetInnerHTML={{__html:a}}></p>　　//p中包含span标签

相关文章