React Native之this詳解

時間 2019-11-09

標籤 react native 詳解欄目 React 简体版

原文原文鏈接

this引發的錯誤詳解

咱們在學習React Native的過程當中，確定常常碰見過undefined is not an object這樣的問題吧，尤爲是剛開始學習的時候，使用this.props或者this.setState的時候會報相似於以下錯誤：react

接下來咱們來分析如下究竟是什麼緣由形成的錯誤，
根據錯誤的提示，找到報錯的代碼，咱們會發現：
報錯的都是this.props.?或者this.setState(?),都是出如今有this的地方react-native

報錯的緣由是沒有定義該對象，而咱們都知道this表明的就是當前對象，又怎麼會出現未定義對象呢？那就只能說明是表明當前對象的this和此處this.props的this指代的不是同一個對象。函數

那麼咱們就須要弄明白，何時this指代的不是當前對象的this呢，接下里咱們來看一個Demo，首先，咱們分三處分別使用this，看一下是什麼樣的結果，以下：學習

class RN_This extends Component {

    constructor(props) {
        super(props)
        this.state = {
            name: 'VennyChen',
            age: 24,
            sex: '男'
        }
    }

    componentDidMount() {
        //第一處
        // this.showStudentName()
    }

    render() {
        //第二處
        this.showStudentName()
        return (
            <View style={styles.container}>
                <Head 
                    onPress={this.showStudentName} text="this的第一種綁定方式">
                </Head>
            </View>
        )
    }

    showStudentName() {
        //第三處
        //alert(this.state.name)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
})


module.exports = RN_This

運行的結果是：flex

第一處：正常執行
第二處：正常執行
第三處：undefined is not an objectthis

由此能夠看出，只要咱們不在render函數的返回組件中使用this.props或者this.setState，那麼this就做用於當前操做對象code

因而就有人要問了，那咱們如何在render函數的return中使用this.props或者this.setState呢？固然，就是接下來要講的，React Native中綁定this的方法：component

綁定this的三種方法

方法一：
在構造方法constrctor中綁定，綁定方式以下：對象

this.函數名 = this.函數名.bind(this)

完成代碼以下：繼承

import React, {Component} from 'react'
import {AppRegistry, StyleSheet, Image, View, Text} from 'react-native'
import Head from '../widget/Head'

class RN_This extends Component {

    constructor(props) {
        super(props)
        this.state = {
            name: 'VennyChen',
            age: 24,
            sex: '男'
        }
        //第一種this的綁定方式
        this.showStudentName = this.showStudentName.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                <Head onPress={this.showStudentName} txt="this的第一種綁定方式"></Head>
            </View>
        )
    }

    showStudentName() {
        alert(this.state.name)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
})

module.exports = RN_This

方法二：在Render函數的組件中直接綁定，綁定方法以下：

{this.函數名.bind(this)}

完整代碼以下：

import React, {Component} from 'react'
import {AppRegistry, StyleSheet, Image, View, Text} from 'react-native'
import Head from '../widget/Head'

class RN_This extends Component {

    /*綁定this的三種實現方式*/

    constructor(props) {
        super(props)
        this.state = {
            name: 'VennyChen',
            age: 24,
            sex: '男'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {/*this的第二種綁定方式*/}
                <Head onPress={this.showStudentAge.bind(this)} txt="this的第二種綁定方式"></Head>
            </View>
        )
    }

    showStudentAge() {
        alert(this.state.age)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
})

module.exports = RN_This

方法三：使用箭頭函數，由於在ES6中，箭頭函數是本身的this值的，因此箭頭函數內的this值繼承自外圍做用域，所以，在箭頭函數中是能夠直接使用this的，以下：

import React, {Component} from 'react'
import {AppRegistry, StyleSheet, Image, View, Text} from 'react-native'
import Head from '../widget/Head'

class RN_This extends Component {

    constructor(props) {
        super(props)
        this.state = {
            name: 'VennyChen',
            age: 24,
            sex: '男'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Head onPress={this.showStudentSex} txt="this的第三種綁定方式"></Head>
            </View>
        )
    }

    /* this的第三種綁定方式,定義箭頭函數*/
    showStudentSex = () => {
        alert(this.state.sex)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    }
})

module.exports = RN_This

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。