react学习之路(一些小知识)

1、我遇到的问题

react的return中,return出来的内容里,如果有<>这种箭头,而又不是标签开始或者闭合的时候
但是,react会认为是,并且还给你报错了。

那就这么玩

return(
  <div>
    <p>我就是{`<来说明一下>`}这个问题
  </div>
)

这里是利用了{},告诉react这是一段js代码。然后就可以了。

2、react书写

写react的时候,使用

class Test extands React.Component{}

而不是

var
Test = React.createClass({})

因为后者在新版本react中被舍弃。

3、react中this问题

虽然使用箭头函数可以有效减少this丢失的问题,在dom标签中的onchang,之类事件上,箭头函数内包含实际要调用的函数写法是可以的,或者可以在事件后面.bind(this)
比如

<input onChange={this.changeInput.bind(this)}/>

如果是需要传值的,也是可以的啊

<div onClick={this.clickHandle.bind(this,item,id)}>

如果bind(this)的this后面没有参数,默认第一个参数是event
如果要又要event又要传值

<div onMouseEnter={(e)=>{this.handle(e,id)}}>

这鼠标移入移出 使用onMouseEnter 和 onMouseLeave,移入子级 不想让父级的移入移出效果受影响(使用onMouseOver之类,会一直在闪)

不过,要注意的是
使用setTimeout或者setInterval的时候不使用箭头函数,也记得使用.bind(this)

后面会陆续补充

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 10,142评论 0 5
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 11,808评论 7 41
  • JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInt...
    许先生__阅读 3,698评论 0 1
  • 十五年前,《古墓丽影2》上映没有收到想象中的票房好成绩,但安吉丽娜朱莉扮演的劳拉英姿飒爽形象深入人心。也可能是古墓...
    拾洛叶阅读 4,198评论 0 1
  • 你去深圳了, 我还在看长沙的天气, 习惯这个东西真的是,, …… 毫无用处,, 比如, 喜欢你
    江山如画爱今朝阅读 1,930评论 0 0