Question

我正在尝试为React构建一个Promise包装器组件，它将像这样声明性地工作：

  <Deferred promise={Promise.resolve(123)}>

    <Deferred.Then>
      {value => <div>resolved to {value}</div>}
    </Deferred.Then>

    <Deferred.Error>
      {reason => <div>rejected for {reason}</div>}
    </Deferred.Error>

  </Deferred>

好消息：它正在起作用……（父Deferred组件向孩子添加了带有承诺状态的道具。每个孩子都知道如何处理承诺的每个状态（未决，已解决，已拒绝），并且适当地调用其renderProp等。

坏消息：在示例中，我真的希望value（在<Deferred.Then>子级）中以number的形式输入安全，因为这是诺言所要解决的！现在，我必须将其设为any，这迫使renderProp需要强制转换：-（

我认为我的问题是，尽管父组件是泛型（Deferred<T>），但打字稿不允许静态方法或子类访问父级的泛型。我认为这是有道理的...

有人对如何保持类似的声明性“惊喜”语法以及为then renderProp获得类型安全性有想法吗？

谢谢！

ps：当然，如果我用道具做这一切：

<Deferred promise={Promise.resolve(123)} then={value => <div>{value}</div>} ... />

我认为使所有道具都具有类型感知能力非常容易，但这使JSX变得很糟糕。

如何实现React Deferred组件（在打字稿中）？

0 个答案: