javascript - 如何在 Flow 中返回的 React$Element 中指定可选 prop？

Question

我有一个 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

Answer 1

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

这有效:

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

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

换句话说，您正在描述任何 ReactElement可以选择 onClick ，但是 - 如果确实如此 - 那么它一定是 ?Function .

Here's a fully working example (我替换了你的一些类型，但要点就在那里):