如何在 Flow 中返回的 React$Element 中指定可选props?

IT技术 javascript reactjs types flowtype
2021-05-04 03:53:37

我有一个 React 组件,根据它接收到的 prop,它可能返回不可点击div(即,没有onClick-prop)或可点击button(即,有onClick-prop)。如何在 Flow 类型注释中指定它?

我曾经用作?React$Element<*>返回类型,但这不起作用,所以我只是尝试用*一个对象替换,指定类型。?React$Element<{ className: string }>工作得很好,但我似乎无法添加可选的onClick. 我已经尝试了两者onClick?: Function- 我在某些地方看到的一种语法 - 并且onClick: ?Function- 正如你在下面看到的 - 但两者都在底部抛出错误。

type RequestDataButtonType = (props: Props) => ?React$Element<{
  className: string,
  onClick: ?Function,
}>

const RequestDataButton
  : RequestDataButtonType
  = ({ requestData, status }) => {
    if (status === Status.REQUESTED) {
      return (
        <div className={css.requested}>
          Contact details requested
        </div>
      )
    } else if (status === Status.ERROR) {
      return (
        <button
          className={css.error}
          onClick={requestData}>
          Error
        </button>
      )
    } else if (status === Status.REQUESTING) {
      return (
        <div className={css.requesting}>
          Requesting contact details
          <LoadIndicator className={css.loadIndicator} />
        </div>
      )
    } else {
      return (
        <button
          className={css.request}
          onClick={requestData}>
          Request contact details
        </button>
      )
    }
  }

Flow 为上面的代码抛出以下错误(忽略行号,我删除了一些不相关的代码):

> flow; test $? -eq 0 -o $? -eq 2

src/content/components/RequestDataButton/RequestDataButton.js:43
 43:         <div className={css.requested}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element: `div`
 33: type RequestDataButtonType = (props: Props) => ?React$Element<{
                                                                   ^ property `onClick`. Property not found in
 43:         <div className={css.requested}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of JSX Intrinsic: `div`

src/content/components/RequestDataButton/RequestDataButton.js:57
 57:         <div className={css.requesting}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element: `div`
 33: type RequestDataButtonType = (props: Props) => ?React$Element<{
                                                                   ^ property `onClick`. Property not found in
 57:         <div className={css.requesting}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of JSX Intrinsic: `div`


Found 2 errors
1个回答

您可以使用$Shape<T>通过类型检查。

这有效:

type RequestDataButtonType = (props: Props) => ?React$Element<$Shape<{
  className: string,
  onClick: ?Function,
}>>

$Shape<T> 不需要定义所有属性,但定义的属性必须与类型定义匹配。

换句话说,您正在描述任何ReactElement可以选择拥有onClick,但是 - 如果有 - 那么它必须是?Function.

这是一个完整的示例(我替换了您的一些类型,但要点在那里):