如何在Flow中返回的React $ Element中指定可选道具？

Question

我有一个React组件，根据它接收的道具，它可能返回不可点击的div （即，没有onClick -prop）或可点击的button （即，带有onClick -prop）。 如何在“流类型”注释中指定此内容？

我曾经使用?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

Answer 1

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

这有效：

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

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

换句话说，您正在描述可以有onClick任何ReactElement ，但是-如果有的话-那么它必须是?Function 。

这是一个完全正常的示例 （我替换了您的某些类型，但要点在那里）：