我可以使用 PropTypes 来表示一个 prop 是一个 Promise 吗？

Question

PropTypes 有助于调试，因为它们会在未满足预期时显示警告。除此之外，他们也很好地表达了如何使用组件的意图。

如果我有一个组件接受一个 prop 的值可以是一个 promise，有什么方法可以使用 PropTypes 来表达它吗？我正在想象一些直接的东西PropTypes.promise，或者使用构建块 PropTypes 来表达“thenable”概念的某种方式。

这是一个高度简化的示例，用于展示我的预期用例：

class SomeComponent extends Component {
  static propTypes = {
    someDataPromise: PropTypes.object // <-- can I be more expressive here?
  }

  state = {
    isLoading: false
  }

  async handleSubmit() {
    this.setState({ isLoading: true });

    const data = await this.props.someDataPromise;
    const response = await fetch(`/some/api/endpoint?data=${data}`);
    // do something with the response

    this.setState({ isLoading: false });
  }

  render() { /* ... */ }
}

Answer 1

您可以使用具有特定形状的对象，例如

  PropTypes.shape({
     then: PropTypes.func.isRequired,
     catch: PropTypes.func.isRequired
  })

Answer 2

表达 prop 是 Promise 的另一种方式是使用PropTypes.instanceOf(). 重要警告：这仅在您的承诺是 Promise 类的实例时才有效：

static propTypes = {
  someDataPromise: PropTypes.instanceOf(Promise)
}