React-native & typescript：有条件地将组件分配给变量

Question

Can anyone assist with error below: JSX element type 'XXX' does not have any construct or call signatures

I want to render component conditionally

const RenderingComponent = someCondition ? TouchableNativeFeedback : TouchableOpacity 

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

Answer 1

Try to explicitly specify the type:

const RenderingComponent: React.ElementType = someCondition ? TouchableNativeFeedback : TouchableOpacity 

---

Also you can create a wrapper for your condition, eg

interface Props {
  someCondition: boolean;
  // Any other props you want to pass
}

const RenderingComponent = (props: PropsWithChildren<Props>) => {
  const {someCondition, children} = props;
 
  if (someCondition) {
    return < TouchableNativeFeedback {...props}> {children} </TouchableNativeFeedback >
  } else {
    return <TouchableOpacity {...props}> {children} </TouchableOpacity>
  }
}

And then use RenderingComponent