航遇项目react踩坑

Posted 2020-11-04 大雄是个好青年

开发项目中遇见的问题

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

　　b.DatePicker下的RangePicker，没值的时候可以传空数组，可解决；

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标签