Question

PropTypes对于调试很有帮助，因为当未达到期望值时它们会显示警告。除此之外，它们还很好地表达了打算如何使用组件的意图。

如果我有一个接受道具的组件，该道具的值可以是一个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.instanceOf()。重要警告：仅当您的承诺是Promise类的实例时，此方法才有效：

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

Answer 2

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

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

Answer 3

我不认为这就是您应该做出反应的方式。 React只不过是高级模板引擎，这意味着您拥有数据的“状态”和表示该状态的视图。将promise用作属性意味着您具有未定义的状态，这在视图组件方面真的很难表示。这是编程的主要问题，您可以做任何想做的事，但是当使用框架时，您应该遵循框架的理念。

长话短说，不要将诺言作为财产。在将属性传递给视图组件之前，请确保有效的确定性状态。也许像redux这样的全局状态具有thunk或redux observables可以帮助您处理异步信息。

我可以使用PropTypes来表示道具是一个承诺吗？

3 个答案: