React组件绑定this的方式有哪些

本篇内容主要讲解“React组件绑定this的方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React组件绑定this的方式有哪些”吧!

创新互联建站专注于中小企业网站建设、策划制作、运行维护,主要提供一站式的企业网站建设服务。建站类型:公司网站建设、品牌网站建设、成都外贸网站建设公司独立站等。创新互联不是单一的建网站,而是结合企业的建站目标去规划网站怎么建,如何利于运营,寻求适合的建站方案。其次,网站后台操作的便捷性也是网站制作过程中的重点,创新互联建站的网站后台简单便捷,真正实现了零基础操作。

用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部可以定义一些方法,这些方法的this需要绑定到组件实例上,小编这里总结了一下,一共有四种方案:

第一种方案,在构造函数内部使用bind绑定this,这样做的好处是,避免每次渲染时都要重新绑定,代码如下:

import React, {Component} from 'react'
class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}        this.handleClick = this.handleClick.bind(this)    }
   handleClick (e) {        console.log(this.state.message)    }
   render () {        return (            
                           
       )    }}

第二种方案同样是用bind,但是这次不再构造函数内部使用,而是在render函数内绑定,但是这样的话,每次渲染都需要重新绑定,代码如下:

import React, {Component} from 'react'
class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }
   handleClick (name, e) {        console.log(this.state.message + name)    }
   render () {        return (            
                           
       )    }}

第三种方案是在render函数中,调用方法的位置包裹一层箭头函数,因为箭头函数的this指向箭头函数定义的时候其所处作用域的this,而箭头函数在render函数中定义,render函数this始终指向组件实例,所以箭头函数的this也指向组件实例,代码如下:

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }
   handleClick (e) {        console.log(this.state.message)    }
   render () {        return (            
                           
       )    }

以上这种方式有个小问题,因为箭头函数总是匿名的,如果你打算移除监听事件,是做不到的,那么怎么做才可以移除呢?看下一种方案。

第四种方案,代码如下:

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}    }     handleClick = (e) => {        console.log(this.state.message)    }     render () {        return (            
                Say Hello            
        )    }}

不过,在Classes中直接赋值是ES7的写法,ES6并不支持,你有两种选择,一种是配置你的开发环境支持ES7,一种使采用如下方式,下面这种方式是第四种方案的另外一种写法,代码如下:

class Test extends React.Component {    constructor (props) {        super(props)        this.state = {message: 'Allo!'}        this.handleClick = (e) => {            console.log(this.state.message)        }    }     render () {        return (            
                           
       )    }

以上便是react组件内部方法this绑定的四种方案,如果还有其它方案欢迎留言。

资料引用:

https://blog.csdn.net/sinat_17775997/article/details/56839485

到此,相信大家对“React组件绑定this的方式有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前题目:React组件绑定this的方式有哪些
网页链接:http://myzitong.com/article/pggcje.html