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

Question

我有一个 React 组件，根据它收到的 prop，它可能 return 不可点击的 div（即没有 onClick-prop）或可点击 button（即带有 onClick-prop）。如何在流类型注释中指定它？

我曾经使用 ?React$Element<*> 作为 return 类型，但这没有用，所以我只是尝试用一个对象替换 *，指定类型。 ?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（我替换了你的一些类型，但要点在那里）：

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

How do I specify an optional prop in the returned React$Element in Flow?

javascript

reactjs

types

flowtype