Question

我尝试使用Container/Presentational pattern（a.k.a Smart / Dumb组件）实现React应用程序。

简单地说，我所拥有的是一个展示和隐藏模态窗口的演示组件。在模态中有一个表单，一旦用户从Presentational组件提交表单，我就调用Container（通过prop）。此时，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

我的问题是父母是否可以向儿童退还承诺，或者是否有更多反应方式可以做到这一点？

Answer 1

你所做的事情一定不会有任何问题。

另一个选择是移动'isModalOpen＆＃39;陈述到父组件，然后通过道具将其传递给孩子。那时，Presentational.jsx确实是一个表现性的组成部分。通常在谈论智能/哑或容器/表示组件时，所有状态都存在于父组件中，而哑组件只是根据他们收到的道具进行渲染。

这里的优势在于，您的Presentational.jsx现在可用于您在提交模式时不想使用承诺的情况。此外，除了提交模式之外，您还可以使用其他逻辑来关闭模态。因此，您可以获得具有更高重用潜力的组件，因为它假定更少。

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

等待来自React中的孩子的父组件的承诺

1 个答案: