在 React 中等待来自子组件的父组件的承诺答案

【问题标题】：Wait for promise from father component from a children in React在 React 中等待来自子组件的父组件的承诺
【发布时间】：2017-05-26 13:16:14
【问题描述】：

我正在尝试使用 Container/Presentational pattern（也称为 Smart/Dumb 组件）来实现 React 应用程序。

简单地说，我所拥有的是一个展示性组件，它显示和隐藏一个模式窗口。在模式中有一个表单，一旦用户从 Presentational 组件提交表单，我就会调用容器（通过道具）。此时，Container 发出 AJAX 请求。

用一种更直观的方式来说，这就是发生的事情：

modal submit -> Presentational calls Container -> Container makes AJAX call

AJAX 调用完成后，我需要通知 Presentational 组件，以便它可以隐藏模式。

我实现它的方式如下：

// In Presentational.jsx
handleModalSubmit() {
  this.props
  .onSubmit()
  .then(() => this.setState({ isModalOpen: false }))
}

// In Container.jsx
handleSubmit () {
  return fetch(/*...*/).then(/* handle the data */)
}

您可以在此处查看它的运行情况https://www.webpackbin.com/bins/-Kl3oN5Hua4cxwmZx4Qo

我的问题是父母可以向孩子返回承诺还是有更被动的方式来做到这一点？

【问题讨论】：

我认为在这种情况下使用 Redux 更好。

标签： javascript reactjs

【解决方案1】：

你所做的不一定有什么问题。

另一种选择是将“isModalOpen”状态向上移动到父组件中，然后通过道具将其传递给子组件。那时，Presentational.jsx 是真正的演示组件。通常在谈论智能/哑组件或容器/展示组件时，所有状态都存在于父组件中，而哑组件只是根据它们收到的道具进行渲染。

这里的优点是您的 Presentational.jsx 现在可以在您不想在提交模式时使用 Promise 的情况下使用。此外，您可能有其他逻辑也可能关闭模式而不是提交它。因此，您将获得一个具有更大重用潜力的组件，因为它假设更少。

然而，权衡是因为你的假设更少，你的组件不再包含应用程序中可能常见的模式的逻辑（提交返回一个承诺并在承诺解决时关闭模式）。为了两全其美，您可以拥有无状态组件，然后围绕它创建一个简单的包装器，其中包含您当前拥有的 isModal 状态管理。使用无状态和有状态组件，您可以处理您只希望模式在提交承诺解析时关闭的常见情况以及您需要一些不同但看起来相同的情况。

【讨论】：