2016-10-24 37 views
6

「ダム」レンダラーと同じくらい多くのコンポーネントでアプリを試して構造化するために、私が一番よく読んだものからです。あなたは、データを取り出して小道具としてコンポーネントに渡すコンテナを持っています。リアクション引数を持つネイティブ渡し関数を小道具

これは、イベント以外の引数を必要とする関数をチェーンに渡すまでうまく動作します。

class MyClass extends Component { 


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

    render() { 

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

    } 

} 

私は単にそれをmyComponentのonPressハンドラとして渡すだけで、呼び出されたときにmyIdを返さないでしょう。これを回避するために、私はこのようなことをやります。

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

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

私はこれを完全に間違って行っていますか?私は、唯一の機能がtitle、onpress関数をとり、ListViews renderRow関数で使用されるリスト項目を返すことであるリスト項目に対して再利用できる単純なコンポーネントを持つことができるようにしたいと考えています。多くのonPress関数では、onPressで変数を使用する必要があります。

良い方法がありますか?あなたは(MyClassの中で他のメソッドを呼び出すために例えば)_onItemPress内部thisを使用する場合、あなたはスコープをバインドする必要があり、

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

また:

答えて

1

適切な構文はこのようなものになるだろう

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

...またはあなたが好む場合は、コンストラクタですでにそれをバインドすることができます:

このような
constructor(props) { 
    super(props); 
    this._onItemPress = this._onItemPress.bind(this); 
} 
関連する問題