子コンポーネントに親コンポーネントを渡すネイティブナビゲーターに反応する

Question

以下の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（）を簡単に呼び出すことができます。

Answer 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の魔法だけでそれを処理する必要があります。