React Native+TypeScript条件赋值组件报JSX无构造调用签名错误怎么解决

报错原因 #

TypeScript 无法自动推导 TouchableNativeFeedback 和 TouchableOpacity 两个组件的联合类型，推导得到的变量类型不符合 JSX 可渲染组件的类型约束，因此触发该报错。

解决方案 #

方案1：手动指定变量类型 #

手动给存储组件的变量标注联合类型，即可让 TS 识别到这是合法的可渲染组件：

import type { TouchableNativeFeedback, TouchableOpacity } from 'react-native'

// 用 typeof 提取两个组件的类型组成联合类型
const RenderingComponent: typeof TouchableNativeFeedback | typeof TouchableOpacity = someCondition ? TouchableNativeFeedback : TouchableOpacity 

return(
  <View>
     <RenderingComponent onPress={()=>{}} />
  </View>
) 

方案2：渲染时直接做条件判断 #

不把组件赋值给中间变量，直接在JSX中做三元判断，TS可以自动识别类型，不会触发报错：

return(
  <View>
    {someCondition ? (
      <TouchableNativeFeedback onPress={()=>{}} />
    ) : (
      <TouchableOpacity onPress={()=>{}} />
    )}
  </View>
) 

注意事项 #

TouchableNativeFeedback 仅Android平台支持，判断条件建议加上平台判断逻辑，避免iOS平台出现异常。

内容的提问来源于stack exchange，提问作者Dan