fonksiyonu

Question

içinden Yerli erişim this.prop Tepki Aşağıdaki kod var: Ben hata mesajı almaya devam

module.exports = class Menu extends Component { 

    about() { 
     this.props.nav.push({ 
      component: TestView, 
      title: 'Test View', 
     }); 
    } 

    render() { 
     return (
      <ScrollView 
       scrollsToTop={false} 
       style={styles.menu} 
       navigator={this.props.nav}> 
       <View style={styles.logoContainer}> 
        <Image 
         style={styles.logo} 
         source={{ uri, }}/> 
       </View> 

       <Text onPress={this.about} style={styles.item}>About</Text> 
       <Text style={styles.item}>Account</Text> 
      </ScrollView> 
     ); 
    } 
}; 

:

"undefined is not an object ("evaluating this.props.nav") 

"onPress" "this.about" olarak adlandırdığı

. Render işlevine bir console.log yerleştirdim ve bu.props.nav'un ​​bir değer içerdiğini görebiliyordum. Sorun about() işlevinde oluşur ve neden emin değilim.

Herhangi bir öneri harika olur mu?

Teşekkür

Answer 1

ben emin olamayız, ama bu benim için bir JavaScript this bağlama sorunu gibi görünüyor. ES6 sınıfı sözdizimi ile tanımlanan ReactJS bileşenlerinde, not automatically bindthis, bu nedenle bir işlevin nasıl çağrıldığına bağlı olarak Javascript'in rules that vary the value of this tarafından ısırılmaya başlanmıştır. Düğme işleyicisi ayarlarken açıkça .bind kullanmanız gerekebilir

:

<Text onPress={this.about.bind(this)} style={styles.item}>About</Text> 

Yani about() fonksiyonunda olduğu this Eğer işleyicisi kurmak render() fonksiyonunda this aynı olacaktır.

a repo'u buldum; bu, aynı sorunu çözme gibi diğer yöntemleri gösteren bir kurucuda bağlama veya işleyiciniz için "Fat-arrow" functions'u kullanarak bulundu.

Deneyimlerim web için React kullanımı ile ilgilidir ve React Native'ın bu alanda farklı olup olmadığından emin değilim.

Answer 2

Ayrıca, yöntem beyanının kendisini yeniden bağlayabilirsiniz, böylece JSX'inizde .bind(this) numaralı telefonu aramayı hatırlamanız gerekmez. Aynı işlevi çağıran birçok düğmeniz varsa yararlıdır. Örneğin

:

class Menu extends Component { 
    constructor(props) { 
     super(props); 
     // Replace instance method with a new 'bound' version 
     this.about = this.about.bind(this); 
    } 

// Elsewhere in JSX you don't need to remember to call .bind(this) 
<Text onPress={this.about} style={styles.item}>About</Text>