使用流程为React Native中的无状态功能组件定义道具类型

Question

我目前正在使用flow和eslint清理我们的代码库。

Eslint告诉您将无状态组件转换为无状态功能组件。 但是我还没有找到有关如何正确输入道具的示例。 这是我尝试过的：

原始组件：

type Props = {onPress : Function}

export default class MyButton extends React.Component <Props> {
  render() {
    ...  // use this.props.onPress
  }
}

版本1（我希望函数如何工作）：这里的流程说Cannot create MyButton element because a callable signature is missing in props [1] but exists in function type [2].

const MyButton = (onPress: Function) => (
  return(
    ...  // use onPress
  )
}

（如在看到第2版在这里 ）：这里eslint抱怨onPress不能被发现。 ${onPress}也不起作用。 Flow抱怨： Missing type annotation for destructuring.

const MyButton = ({onPress: Function}) => (
  return(
    ...  // use onPress (or ${onPress} ??)
  )
}

那么我该如何解决呢？

Answer 1

您的版本2已经接近，但您无法在解构中定义类型； 您必须定义整个对象类型。 看起来像这样

type Props = {
  onPress: Function
}
const MyButton = ({ onPress }: Props) => (
  return(
    ...
  )
}