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

【问题标题】：Passing in a Function with Parameters into a Child Component in React Native Typescript在 React Native Typescript 中将带参数的函数传递给子组件
【发布时间】：2020-12-26 15:01:22
【问题描述】：

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

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'

【问题讨论】：

标签： typescript react-native react-navigation

【解决方案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)}
  ...
/>

【讨论】：