【问题标题】：TS/SFC/RenderProp: Cannot invoke an expression whose type lacks a call signatureTS/SFC/RenderProp：无法调用类型缺少调用签名的表达式
【发布时间】：2019-07-24 16:49:03
【问题描述】：

Typescript 新手，我的大部分错误都已解决，但我不确定如何处理这个错误。鉴于此组件...

const CurrentUser: React.SFC = props => (
  <Query {...props} query={CURRENT_USER_QUERY}>
    {payload => props.children(payload)}
  </Query>
)

我看到了这些错误。我不明白孩子怎么可能是空的或未定义的。如果对象是 SFC，他们不保证吗？我该如何解决这个问题？

无法调用可能为“空”或“未定义”的对象

2019 年 3 月 3 日更新

因为 BlackICE 的评论，我最终意识到我需要在调用它之前检查孩子是否存在。呸！但是现在我有一个不同的问题

无法调用类型缺少调用签名的表达式。键入'字符串 |号码 |真实 | {} |反应元素 |反应节点数组 | ReactPortal' 没有兼容的调用签名。

【问题讨论】：

props 上 children 属性名后面的 ? 表示可以为空。
@BlackICE 没错，但为什么会这样呢？我想如果它是一个自关闭组件<CurrentUser /> 它可能是，但由于这是一个渲染道具，那不应该是。知道如何解决这个问题吗？
为什么你认为SFC不能用作自闭？
我没说不能。我意识到如果我们是，孩子们将是空的

标签： reactjs typescript

【解决方案1】：

对于那些感兴趣的人，这里是最终的解决方案......

type Props = {
  children: (a: QueryResult) => JSX.Element
}

const CurrentUser: React.SFC<Props> = props => (
  <Query {...props} query={CURRENT_USER_QUERY}>
    {payload => props.children && props.children(payload)}
  </Query>
)

其中QueryResult 是从react-apollo 导入的

import { Query, QueryResult } from 'react-apollo'

【讨论】：