react遇到的各种坑
- 标签里用到
<label for>
的,for
要写成htmlFor
- 标签里的
class
要写成className
- 组件首字母一定要大写
- 单标签最后一定要闭合
- 如果html里要空格转义,
注意不要漏了分号; - style要写成
style={{clear: 'both',backgroundColor:'red',width:'200px'}}
- 组件里能用
<button>
的地方就不要用input type="button"
了,否则写个value
还要用{}
- 标签里的
ref
属性的属性名不要出现中横杠比如message-content
,如果有多个单词,直接写成驼峰形式 - 把要改变的数据写进父组件的
getInitialState
的属性里,然后通过this.props.listArr
传进去,表明初始状态是组件里listArr
里的属性。 - 如果将子组件改变的数据传递给父组件呢?可以在父组件里申明一个函数,里面传参
data
,然后在创建出子组件的对象的时候在属性上传入父组件的这个函数,然后在子组件里触发了某个事件的函数里,通过this.props.addItem()
这样的方式调用父组件的函数,这个addItem
就是父组件的函数,里面传参 - 如果组件之间的通信超过的一层,传参就非常麻烦,需要用到
react
的一个插件叫PubSub
订阅发布
(1) 先导入库
(2) 全局设置一个事件名称,子组件和父组件共用,比如var deleteItem = 'deleteItem';
(3) 子组件,触发事件之后,发布事件
//使用PubSub.publish(),第一个参数是公用的事件名称,第二个参数是你要传播的值
deleteItemHandler:function(){ PubSub.publish(deleteItem, this.props.item); },
(4) 父组件,是等组件全部渲染之后,因为组件还在内存中,虚拟DOM还没有渲染出来,没有正式出现在页面上时,是获取不到真是DOM的,所以在componentDidMount
的函数里订阅一个从子组件发布出来的事件,在渲染完成后,会自动触发这个函数
//使用PubSub.subscribe(),第一个参数是公用的事件名称,第二个参数是一个回调函数,可以是用箭头函数方式使它内部this指向组件对象,evName是事件对象,data就是子组件发布过来,这里接受到的data
componentDidMount:function(){ PubSub.subscribe(deleteItem,(evName,data) =>{ var newArr = this.state.listArr.filter(function(item,index){ return item!= data; }); this.setState({ listArr:newArr }); }); },
- 这里顺便复习一下
Array
的filter()
方法,参数里是个函数,参数是项和下标,return
里写一个条件,所有符合条件的都会提取出来放到一个新的数组里,这里将数组里不等于传回来的这个data
里的值的每一项都放到了newArr
里,然后通过setState()
,更新state
里数组的值 利用
ReactCSSTransitionGroup
来添加一些简单的动画效果,比如列表内容增加或者删除时可以有渐进渐出的效果。但是这个标签默认是span
标签,使用在table
或者options
里提示警告,不能在table
和options
里嵌套span
,所以可以通过它本身的component
属性,比如component="div"
直接将这个标签渲染为我们需要的标签即可。另外css
里对应的动画时间要和这里标签里的时间对应var ListComponent = React.createClass({ render: function(){return ( <ReactCSSTransitionGroup component="div" id="message-container" transitionName="messageContainer" transitionEnterTimeout={800} //这里定义渐进的时间 > { //这里放该组件的子级,也就意味写着这里面所有的内容的都会有动画效果, this.props.mesArr.map(function(ele){ return <ItemComponent key={ele.time} {...ele} /> }) } </ReactCSSTransitionGroup> ) } });
通过搜索框输入字符让显示区即时地筛选出搜索结果的效果。这里的难点是,如果直接通过
onChange
来获取打入的字符串来更新父组件的state
里的数据,会造成数据返回不到原来的状态。所以思路可以是这样的,在父组件state
里先创建一个空数组,每次当搜索框获取到焦点时,就把父组件当前的显示数据赋值给这个新建的数组,然后filter
的时候是通过这个新数组里的数据进行筛选,而不是原来的数据,另外,当搜索框内容为空或者失去焦点时,再把视图的数据恢复到得到焦点时的状态即可。下面是可以实现的父组件中的代码:
//在搜索框聚焦时,将当前state里的userList赋值给currentList,然后每次输入,筛选的对象都是currentList
focusHandler:function(){this.state.currentList = this.state.userList; }, //在失去焦点时立刻将刚才存储的currentList赋值给userList,让视图再恢复到点击搜索框之前 blurHandler:function(){ this.setState(function(){ return { userList: this.state.currentList } }); }, //搜索功能 searchUser:function(text){ //这里要将text进行判断,如果为空,就要让视图呈现刚聚焦时的状态,否则就进行筛选 if(text!=''){ var newText = text.toLowerCase(); var newArr = this.state.currentList.filter(function(item){ //每次点击通过保存的currentList来过滤 return item.username.toLowerCase().indexOf(newText) != -1; }); this.setState(function(){ return { userList: newArr } }); }else{ this.setState(function(){ return { userList: this.state.currentList } }); } },
- React-Router和动画的结合使用
除了两种技术的结合之外,有个很重要的地方不要忘记,就是要让每个单独的组件设置样式为position:absolute,否则在动画切换时会出现短暂组件叠加的的情况,用户体验非常差,但是绝对定位后,每个组件都在同一个地方渐入渐出了。
//这里是react创建组件的ES6新写法,省略了function和内部的render,return。
const MenuComponent = ({ children, location }) => (<div> //这里是将组件Menu下控制的路由写在这里,每个路径用Link标签包起来,通过属性to来控制对应不同的路径<div className="col-md-3 list-group"> <Link to="/statistic" className="list-group-item active">Website Statistic Data</Link> <Link to="/topics" className="list-group-item">Hot Topics</Link> <Link to="/visits" className="list-group-item">Today's Visits</Link> <Link to="/status" className="list-group-item">Server Status</Link> </div> //这里把要对应的做成动画的区域用ReactCSSTransitionGroup包起来 <ReactCSSTransitionGroup className="col-md-9 pr clearfix" component="div" transitionName="content" transitionEnterTimeout={500} transitionLeaveTimeout={500} > {React.cloneElement(children, {key: location.pathname,className:"pa"})} </ReactCSSTransitionGroup> </div> ) -------------------------------------------------------------- //这里是render方法里的写法 ReactDOM.render( <Router> //根路由 // "/"代表根路由,IndexRoute表示索引页,如果没有索引页可以作为默认显示的内容 <Route path="/" component={MenuComponent}> <IndexRoute component={StatisticComponent} /> <Route default path="statistic" component={StatisticComponent} /> <Route path="topics" component={TopicComponent} /> <Route path="visits" component={GuestComponent} /> <Route path="status" component={StateComponent} /> </Route> </Router> ,document.getElementById('container') );
- 用ES6的箭头函数写组件
const MenuComponent = ({ children, location }) => {//定义组件里的函数直接在组件里申明即可const changeLink = (ev) => {var parent = ev.target.parentNode;var children = parent.children;for(var i=0; i<children.length; i++){children[i].classList.remove('active'); } ev.target.classList.add('active'); }; //这届写return (),里面写标签 return ( <div> <div className="col-md-3 list-group" onClick={changeLink}> //这里不用再写this.changeLink了 <Link to="/statistic" className="list-group-item active">Website Statistic Data </Link> <Link to="/topics" className="list-group-item">Hot Topics</Link> <Link to="/visits" className="list-group-item">Today's Visits</Link> <Link to="/status" className="list-group-item">Server Status</Link> </div> <ReactCSSTransitionGroup className="col-md-9 pr" component="div" transitionName="content" transitionEnterTimeout={500} transitionLeaveTimeout={500} > {React.cloneElement(children, {key: location.pathname, className: "pa"})} </ReactCSSTransitionGroup> </div> ); };
转载于:https://www.cnblogs.com/frx666/p/6690817.html
react遇到的各种坑相关推荐
- linux平台安装React Native遇到的坑
3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候facebook刚推出支持安卓,然后花了一天的时间在自己的window电脑上配置好了,还是很兴奋的,安装博客地址如 ...
- 【学习react中遇到的坑:内存泄漏报错】
学习react中遇到的坑:内存泄漏报错 对就是这个错误 Can't perform a React state update on an unmounted component. This is a ...
- native react ssh_React Native踩坑笔记(持续更新中...)
最近发现市场上对React Native开发人员的需求挺多的,自己就想学习一下React Native,多一门技术,好将来买个好价位.嘿嘿! 在学习React Native中碰到了不少坑,再次记录下来 ...
- React+G2 + G2plot 踩坑
参与图表组件库开发(要求使用Echarts或G2) 因为这两个都没用过,翻阅多篇文章,最终选择入坑G2,要用就用新技术!所以特此记录一些常用的,方便以后避坑.Echarts或G2对于我这样没用过的人来 ...
- @程序员,React 使用如何避坑?
@程序员,如何更好地写React? 作者 | Alex K 译者 | 苏本如,责编 | 郭芮 出品 | CSDN(ID:CSDNnews) 以下为译文: 在Stack Overflow上回答与Reac ...
- React使用axios的坑:每次都要请求两次,而且前后端相同配置,有的url可以,有的确不可以
用的React和AntDesign做的前端,发现几个问题: 1: 每次都要请求两次,一次OPTIONS,一次POST: 而我在后天使用的都是POST: 调查后解释如下: 也就是说,它会先使用optio ...
- React Native 入门踩坑
开发环境搭建及环境变量配置 开发rn第一步需要配置安卓环境 android studio下载地址: https://developer.android.google.cn/studio/archive ...
- React项目部署踩坑
1. 文件路径问题,在 package.json中增加homepage 2.css中图片路径问题,建议直接用import的引入使用 import bgimg from './images/bg.jpg ...
- (十三)react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题 用useState实现state和setState功能 用useEffect模拟组件生命 ...
最新文章
- Redis 越来越慢?常见延迟问题定位与分析
- ReplaceForm.cs
- 一场实验室意外爆炸事故,解决了58年量子难题,让科学家意外发现“核电共振”...
- python语言介绍-Python语言的简介
- Spring Boot 最核心的 3 个注解详解
- 四.jmeter代码学习, SampleResult【持续更新】
- 关于阿里巴巴iconfont的使用方法
- 2017云栖大会:阿里巴巴宣布成立达摩院
- tar打包的时候忽略一些目录
- Python类属性、类方法和静态方法
- pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
- python画3d图-Python 绘制酷炫的三维图步骤详解
- js页面间通信方法实现
- c++如何生成指定范围的随机数
- 计算机网络 校园网规划与设计方案,校园网网络规划与设计的方案.pdf
- Web前端工程师的职业规划,助你走好前端路
- IBM内存三技术:Chipkill、MPX、MM
- lang3之StringUtils
- 基于解决sci和ei等国外期刊论文翻译阅读难等问题的辅助软件分析
- 副屏幕全屏_win7双屏电脑主屏副屏设置|Win7系统如何设置双屏显示?