反應本地導航器將父組件傳遞給子組件

我不知道如何將對以下TripList實例的引用傳遞給AddTrip組件。我需要做一些這樣的事情來發信號給TripList以在添加新行程後刷新數據。反應本地導航器將父組件傳遞給子組件

在我的render（）方法，裏面<Navigator>我：

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（），增加了一趟後，我想在TripList調用刷新（），所以顯示新的行程。我怎樣才能把事情做好呢？我猜測我需要將TripList以某種方式傳遞給AddTrip，然後我可以在調用onBack（）之前輕鬆調用refresh（）。

來源

2016-10-11 Eloff

這不是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(); }} /> 
}

正如你所看到的，有關添加和尋找旅行的邏輯來自於父組件，這是在這種情況下，導航。你也會注意到我們正在重構allTrips的內容，這很重要，因爲React基於不變性的概念。

您一定聽說過Redux這是一個允許您的所有組件與全球商店進行討論的系統，您可以從中獲取並保存所有應用程序狀態。這有點複雜，這就是爲什麼我沒有用它作爲例子。

我幾乎會忘記最重要的！你不需要向你的組件發出信號，表明它需要更新，React的魔力本身應該照顧它！

來源

2016-10-11 10:13:32 FMCorz

好的，這是有道理的。我在TripList.state中保存了所有的Trips。如果我將它移動到全球範圍內，它會使它更容易。然而，我不會購買最後一點關於自己更新的反應。沒有辦法知道我已經替換了所有的Trips - 你必須讓反應替換它的某種代理檢測分配 - 假設這可能在JavaScript中。這就是我改變數據時使用TripList.state和setState的原因。但是，navigator.pop（）可能會確保render（）被再次調用 - 我會試試看。如果你有這方面的想法，我全都聽。 – Eloff

我設法讓它工作。我緩存了組件上的render方法中的所有Trips，然後實現了shouldComponentUpdate（）{return this.cachedTrips！== allTrips; }。 Navigator在改變場景時確實會調用它。然而，我不得不通過抓取從最初填充allTrips的回調切換到場景，因爲否則它會使用空的allTrips呈現，並且不會調用shouldComponentUpdate（），直到從其導航AWAY爲止。 – Eloff

反應本地導航器將父組件傳遞給子組件

回答

相關問題