클래스 변수에있는 소품이 정의되지 않았습니다.

Question

나는 네이티브 반응을 배우려고 노력하고 있지만 클래스 변수와 관련된 문제로 고민하고 있습니다. 이것은 (매우 긴이기 때문에 전체를 붙여하지 않았다, 그러나 이것은 내 문제의 아이디어를 제공해야합니다) 내 코드입니다 : "_currentTime

class VideoScreen extends Component { 
static _toHHMMSS(time) { 
    var sec_num = parseInt(time, 10); // don't forget the second param 
    var hours = Math.floor(sec_num/3600); 
    var minutes = Math.floor((sec_num - (hours * 3600))/60); 
    var seconds = sec_num - (hours * 3600) - (minutes * 60); 

    if (hours < 10) { 
     hours = "0" + hours; 
    } 
    if (minutes < 10) { 
     minutes = "0" + minutes; 
    } 
    if (seconds < 10) { 
     seconds = "0" + seconds; 
    } 
    return hours + ':' + minutes + ':' + seconds; 
} 

_currentTime = <View refreshing> 
    <Text>{VideoScreen._toHHMMSS(this.props.currentTime)} 
    </Text> 
</View>; 

render() { 
    return (
     <View refreshing> 
      {this._currentTime} 
     </View> 
    ) 
} 

}

불행히도 변수 내에서 정의되지 소품 ". 뷰를 render 메서드로 직접 이동하면 잘 동작합니다 (부울 값에 따라 코드를 숨기고 변수를 만들어야 코드가 훨씬 더 읽기 쉬워지기 때문에 별개의 변수에서 필요합니다). 메소드를 사용하는 것처럼 변수를 클래스에 바인딩해야합니까, 아니면 다른 것을 잘못하고 있습니까?

Answer 1

문제는 this이 바인딩되어 있지 않습니다. 변수를 바인딩 할 수 있는지는 잘 모르지만 메소드로 원하는 것을 얻을 수 있습니다.

class VideoScreen extends Component { 
    constructor(props) { 
     super(props); 
     this._currentTime = this._currentTime.bind(this); 
    } 

    render() { 
     return (
      <View refreshing> 
       {this._currentTime()} 
      </View> 
     ) 
    } 

    _currentTime() { 
     return (
      <View refreshing> 
       <Text>{VideoScreen._toHHMMSS(this.props.currentTime)} 
       </Text> 
      </View> 
     ); 
    } 
}