Question

我不知道如何将对下面的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（）时，在添加一个trip之后，我想在TripList上调用refresh（），以便显示新的行程。我怎样才能最好地构建事物呢？我猜我需要以某种方式将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(); }} />
}

正如您所看到的，添加和查找行程的逻辑来自父组件，在这种情况下是导航器。您还会注意到我们正在重构allTrips的内容，这很重要，因为React基于不变性的概念。

您一定听说过Redux这是一个系统，允许您的所有组件与您从中获取并保存所有应用程序状态的全局存储进行讨论。这有点复杂，这就是我没有用它作为例子的原因。

我几乎忘了最重要的！你不需要向你的组件发出需要刷新的信号，React的魔力应该自己处理它！

将父组件传递给子组件的本机导航器

1 个答案: