如何在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 。

這是一個完全正常的示例 （我替換了您的某些類型，但要點在那里）：