林秀栋的技术博客

react开发中遇到的几个坑

本次项目为兼容ie8,采用了anujs,一些配套设施也进行了版本控制,可能用法与最新版不同

图片引入

react中不能直接靠src=“xxx”引入图片,否则即便使用了url-loader插件,webpack打包时图片路径无法处理,导致打包后的文件找不到图片。

正确方法

<img src={require('./xxx.png')} />

路由跳转

项目使用的是react-router 1.0.3版本

// 跳转
this.props.history.pushState(data, url);

// 跳转页获取数据
let data = this.props.location.state;

有些组件会报错,这是因为组件层级太低,没取到history,需要在引用该组件时引入

<Demo history={this.props.history} />

还有一些公共js中使用到,需要定义到全局供其调用

// 把路由定义到全局
window._ROUTER_ = this.props.history;

// 公共js中
window._ROUTER_.pushState(data, url);

引入html字符串

常规方法引入html字符串时,为防止攻击,react会把他作为字符串解析,不会解析其中的标签,若希望解析其中的标签,可用下面方法

const a = `<span>123</span>`;

// 按字符串解析
<div>{a}</div>

// 按html解析
<div dangerouslySetInnerHTML=></div>

antd+anujs 日期控件多次赋予焦点时报错

环境:antd v1.11.6 + anujs v1.4.9

问题描述:点击日期文本框,选择日期,点击文本框,会出现对象null报错,具体代码为

// Picker.js,196行,如下:
focusCalendar: function focusCalendar() {
    if (this.state.open) {
        this.calendarInstance.focus();//此行报错,calendarInstance为null
    }
}

解决: 把anujs回退到1.3.4版本