2016-10-11 25 views
0

以下のTripListインスタンスへの参照をAddTripコンポーネントに渡す方法がわかりません。新しい旅行を追加した後にデータをリフレッシュするためにTripListに知らせるために、そのようなことをする必要があります。そうTripList上子コンポーネントに親コンポーネントを渡すネイティブナビゲーターに反応する

if (route.index === 1) { 
    return <TripList 
    title={route.title} 
    onForward={() => { 
     navigator.push({ 
      title: 'Add New Trip', 
      index: 2, 
     }); 
    }} 
    onBack={() => { 
     if (route.index > 0) { 
      navigator.pop(); 
     } 
    }} 
/> 
} else { 
    return <AddTrip 
    styles={tripStyles} 
    title={route.title} 
    onBack={() => { navigator.pop(); }} 
    /> 
} 

私はAddTripでonBack()を呼び出すときしかし、旅行を追加した後、私は(リフレッシュを呼びたい):私のrender()メソッドで

<Navigator>の内側に私が持っています新しい旅行が表示されます。それを行うためには、どのようにして最善の方法で構造化できますか私はTripListを何とかAddTripに渡す必要があると思いますし、onBack()を呼び出す前にrefresh()を簡単に呼び出すことができます。

答えて

1

これはReactの仕組みではありません。 propsでコンポーネントのインスタンスを渡すのではなく、コンポーネントにデータを渡します。そして、あなたのコンポーネントAddTripは、旅行を追加するときに呼び出す関数である別のpropsを受け取るべきです。

これをコード例で説明しますが、これはコードが最終的にどうなるかではありませんが、コンポーネントの外部にデータを格納する方法を示しています。あなたが見ることができるように

// Placed at the top of the file, not in a class or function. 
let allTrips = []; 

// Your navigator code. 
if (route.index === 1) { 
    return <TripList 
    trips={allTrips} 
    title={route.title} 
    onForward={() => { 
     navigator.push({ 
      title: 'Add New Trip', 
      index: 2, 
     }); 
    }} 
    onBack={() => { 
     if (route.index > 0) { 
      navigator.pop(); 
     } 
    }} /> 

} else { 
    return <AddTrip 
    styles={tripStyles} 
    title={route.title} 
    onAdd={(tripData) => { 
     allTrips = [...allTrips, tripData]; 
    }} 
    onBack={() => { navigator.pop(); }} /> 
} 

、追加や旅行を見つけることについてのロジックは、この場合、ナビゲータで親コンポーネント、から来ています。 Reactは不変性の概念に基づいているため、allTripsのコンテンツを再構築していることにも注意してください。

あなたのアプリケーションの状態をすべて取得して保存するグローバルストアと、すべてのコンポーネントが話し合うことができるシステムであることは、Reduxを聞いたことがあるはずです。ちょっと複雑なので、私はそれを例として使用しませんでした。

私は最も重要なことをほとんど忘れてしまいます!コンポーネントにリフレッシュする必要があることを伝える必要はなく、Reactの魔法だけでそれを処理する必要があります。

+0

これは意味があります。私はTripList.stateにallTripsを保管していました。私はそれをグローバルに移動すれば、それはより簡単になります。しかし、私はそれ自体をリフレッシュするための最後のビットを購入しません。私がallTripsを置き換えたことに気づく反応はありません。javascriptで可能であると仮定して、割り当てを検出するプロキシの代わりに反応させる必要があります。私はTripList.stateとsetStateを使ってデータを変更していたのです。しかし、navigator.pop()によってrender()が再び呼び出されることが保証されている可能性があります。私はそれを試してみます。あなたがその正面にアイデアを持っているなら、私はすべての耳です。 – Eloff

+0

私はそれを動作させることができました。私はコンポーネントのレンダリングメソッドでallTripsをキャッシュし、次にshouldComponentUpdate()を実装しました{return this.cachedTrips!== allTrips; }。ナビゲータはシーンを変更するときにそれを呼び出します。しかし、それ以外の場合は空のallTripsでレンダリングされ、shouldComponentUpdate()はそれからAWAYをナビゲートするまで呼び出されないため、フェッチによってallTripを最初に設定したコールバックのシーンに切り替える必要がありました。 – Eloff

関連する問題