反应本地导航器将父组件传递给子组件

我不知道如何将对以下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

反应本地导航器将父组件传递给子组件

回答

相关问题