Web前端

react中三种函数调用方法总结

2021-03-22  本文已影响0人  w晚风

方式一:内联调用法


import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcOne(){
        console.log('内联调用法')
    }
    render(){
        return (
            <button onClick={this.funcOne.bind(this)}></button>
        )
    }
}

方式二:配置中调用法


import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
        this.funcTwo = this.funcTwo.bind(this)
    }
    funcTwo(){
        console.log('配置中调用法')
    }
    render(){
        return (
            <button onClick={this.funcTwo}></button>
        )
    }
}

方式三:箭头函数调用法(最推荐)


import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcThree:() => {
        console.log('箭头函数调用法')
    }
    render(){
        return (
            <button onClick={this.funcThree}></button>
        )
    }
}

本文借鉴于:https://www.jianshu.com/p/601109471bbb

上一篇 下一篇

猜你喜欢

热点阅读