在React Native Typescript中将带有参数的函数传递给子组件

Question

我正在尝试将以下函数与字符串参数一起传递给子组件作为道具：

navigateToDetailsPage(nasaId: string) {
  this.props.navigation.navigate('Details', { 
    nasaId: nasaId
  })
}

我将函数和参数传递给子组件，如下所示：

<NasaImage
  onPress={this.navigateToDetailsPage(result.data[0].nasa_id)}
  ...
/>

在子组件NasaImage中，我将onPress声明为：

onPress: () => void

但是，在父组件中出现以下错误：

类型'void'不能分配给类型'（）=> void'.ts（2322） NasaImage.tsx（12，3）：预期的类型来自属性“ onPress”

Answer 1

错误在于：

<NasaImage
  onPress={this.navigateToDetailsPage(result.data[0].nasa_id)}
  ...
/>

您传递了this.navigateToDetailsPage(result.data[0].nasa_id)函数调用的结果（返回void），而您想传递可执行函数。

要修复，请使用箭头功能：

<NasaImage
  onPress={() => this.navigateToDetailsPage(result.data[0].nasa_id)}
  ...
/>