TS/SFC/RenderProp：无法调用类型缺少调用签名的表达式

Posted 2023-03-13

【中文标题】TS/SFC/RenderProp：无法调用类型缺少调用签名的表达式

【英文标题】：TS/SFC/RenderProp: Cannot invoke an expression whose type lacks a call signature

【发布时间】：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不能用作自闭？

我没说不能。我意识到如果我们是，孩子们将是空的

【参考方案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'