2016-10-24 23 views
6

olarak argümanlarla birlikte tepki verme uygulamalarını "aptal" oluşturucular gibi birçok bileşenle denemek ve yapılandırmak için elimden geleni yaptım. Verileri getiren ve bunları sahne olarak bileşenlere aktaran konteynerleriniz var.React Doğal işlevler,

İşlevler, olaylar dışındaki argümanları gerektiren zincirden aşağı iletmek istediğinizde güzel çalışır.

class MyClass extends Component { 


    _onItemPress (myId) { 
    // do something using myId 
    } 

    render() { 

    return <MyComponent myID={10} onPress={(myId) => this._onItemPress(myId)} /> 

    } 

} 

ben sadece benim onPress işleyicisi MyComponent olarak adlandırılan zaman MyID dönmeyecektir geçerseniz

. Bunun üstesinden gelmek için böyle bir şey yapıyorum.

export default ({myId, onPress) => { 
    const pressProxy =() => { 
    onPress(myId) 
    } 

    return (
    <TouchableHighlight onPress={pressProxy}> 
     <Text>Click me to trigger function</Text> 
    </TouchableHighlight> 
) 
} 

Am Ben tamamen yanlış yapıyor? Tek işlevinin bir başlık, onpress işlevi alacağı ve ListViews renderRow işlevinde kullanılacak bir liste öğesini döndüreceği liste öğeleri için yeniden kullanabileceğim basit bir bileşene sahip olmak isterim. OnPress işlevlerinin çoğu, onPress'de kullanılacak değişkenlerin kullanılmasını gerektirir.

Daha iyi bir yolu var mı? Eğer (Sınıfım diğer yöntemleri çağırmak için örneğin) _onItemPress içine this kullanmayı planlıyorsanız, kapsamı bağlamak gerekir,

render() { 
    let myId = 10; 
    return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> 
} 

Ayrıca:

cevap

1

doğru sözdizimi böyle bir şey olurdu

render() { 
    let myId = 10; 
    return <MyComponent 
     myID={myId} 
     onPress={() => this._onItemPress(myId).bind(this)} /> 
} 

... ya da isterseniz yapıcı metotta zaten bağlayabilir:

böyle
constructor(props) { 
    super(props); 
    this._onItemPress = this._onItemPress.bind(this); 
}