Question

我有一个React组件，基于它接收的道具，可能会返回不可点击的div（即没有onClick - 道具）或可点击的button （即onClick - 道具）。如何在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（我替换了你的一些类型，但要点就在那里）：

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

1 个答案: