给定一个在两个属性上通用的 React 组件,一个 load
函数返回类型 T
, 和 children (这是一个接受 T
类型参数的函数)...
class Test<T> extends React.Component<{
load: () => T;
children: (r: T) => JSX.Element;
}> {
render() {
return this.props.children(this.props.load());
}
}
typescript 无法推断 res
的类型来自 load
的返回值, 它默认输入 {}
.
<Test load={() => ({ test: 'x' })}>
{res =>
<span>
{res.test}
</span>}
</Test>;
这是一个错误,还是 typescript 无法根据返回值进行推断——因为它看起来支持 JSX 子项的键入。
编辑:
对于背景,用例正在创建一个接受 load
的“惰性”组件。函数返回一个 promise 解析到一些进一步的 JSX。
最佳答案
更新:与此同时,TypeScript 得到了改进,因此问题中给出的代码会自动推断出 res
的类型。我没有检查是哪个更改造成的,但我猜它发生在 3.0-3.3 左右。
我认为问题在于您的代码被转译为类似于以下内容的内容:
React.createElement(
Test,
{load: () => ({ test: 'x' })},
res =>
<span>
{res.test}
</span>
)
从这种情况可以更清楚地看出,编译器/定义很难正确推断通用参数。在您的情况下,提示编译器就足够了:
<Test load={() => ({ test: 'x' })}>
{(res: { test: string }) =>
<span>
{res.test}
</span>}
</Test>
关于reactjs - typescript :通用 react 组件上子项的类型推断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45526737/