在class中调用this.props.title.length报错

Question

render(){
    return(
    //这里调用.length是成功执行的
        <TouchableOpacity onPress={()=>{alert(this.props.rightTitle.length)}}>
            <View style={styles.container}>
                <Text style={{marginLeft:8}}>{this.props.title}</Text>
                {this.renderRightView()}
            </View>
        </TouchableOpacity>
    )
}

renderRightView=()=>{
    if(this.props.isSwitch){
        return (
            <Switch value={this.state.isOn == true} onValueChange={()=>{this.setState({isOn:!this.state.isOn})}} style={{marginRight:8}}/>
        )
    }
    else{
        return(
            <View style={{flexDirection:'row',alignItems:'center'}}>
                {this.rightTitleView()}
                <Image source={{uri:'icon_cell_rightArrow'}} style={{width:8,height:13,marginRight:8}}/>
            </View>
        )
    }
}

rightTitleView(){
//这里调用.length是会报错的
    if(this.props.rightTitle.length)
    {
        return(
            <Text style={{color:'gray',marginRight:3}}>{this.props.rightTitle}</Text>
        )
    }
}

具体错误是：undefined is not an object (evaluating this.props.rightTitle.length)

Answer 1

是不是rightTitleView()应该写成rightTitleView=()=>{}

Answer 2

rightTitleView需要绑定this,否则获取不了props。

Answer 3

好端端的renderRightView()为什么要写成箭头函数？
箭头函数是回调，回调就要bind(this)。

Answer 4

这边this已经指向TouchableOpacity 了,当然没了，可以手动绑定this，一般是在constructor()函数中，

this.renderRightView = this._renderRightView.bind(this)
this.rightTitleView = this._rightTitleView.bind(this)

也可以用autobind-decorator库来解决这个问题，但是这个需要用到装饰器，需要进行转换一下，配置一下babel就可以