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

Question

我有一个 React 组件，根据它接收到的 prop，它可能会返回不可点击的 div（即，没有 onClick-prop）或可点击的 button（即，带有 @ 987654324@-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（我替换了你的一些类型，但要点在那里）：