Javascript 如何在流中返回的React$元素中指定可选的prop？

我有一个React组件，根据它接收的道具，它可能返回一个不可点击的

div

（即没有

onClick

-prop）或一个可点击的

按钮（即带有
onClick
-prop）。如何在流类型注释中指定此项

我曾经使用
？React$Element
作为返回类型，但这不起作用，所以我只是尝试用一个对象替换
*
，指定类型
？React$Element
工作正常，但我似乎无法添加可选的
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>
      )
    }
  }

type RequestDataButtonType=（props:props）=>？React$元素
常量请求数据按钮
：RequestDataButtonType
=（{requestData，status}）=>{
如果（状态===状态。请求）{
返回(
请提供联系方式
)
}else if（status==status.ERROR）{
返回(
错误
)
}else if（status==status.requising）{
返回(
请求联系方式
)
}否则{
返回(
请求联系方式
)
}
}

Flow为上述代码抛出以下错误（忽略行号，我删除了一些不相关的代码）：

>流程；测试$-eq 0-o$-等式2
src/content/components/RequestDataButton/RequestDataButton.js:43
43:         
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^React元素：`div`
33:type RequestDataButtonType=（props:props）=>？React$Element？React$Element您可以使用
$Shape
通过类型检查

这项工作：

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

type RequestDataButtonType=（props:props）=>？React$元素

$Shape
不要求定义所有属性，但定义的属性必须与类型定义匹配

换句话说，您描述的是任何
ReactElement
，它可以选择性地具有
onClick
，但是如果它具有，那么它必须是一个
？函数

（我替换了你的一些类型，但要点就在这里）：
我对
$Shape
的工作原理还不是100%。在
函数
之前删除
？
似乎完全可以。就好像它认为其中的每个道具都是可选的，但如果它存在，它必须满足类型，而不是类型直接指定它是什么（即，它是否存在）。你知道它是如何工作的吗？或者我在哪里可以找到更多？在他们的文档中找不到任何内容。如果onClick不是可选的，则可以删除。关于文档，我开始写这篇文章是为了解决这个问题，形状还没有被记录下来，但是我们已经收到了。谢谢@GabrielePetronella
type RequestDataButtonType = (props: Props) => ?React$Element<$Shape<{
  className: string,
  onClick: ?Function,
}>>