在反应

时间:2018-02-28 17:22:05

标签: reactjs

我正在尝试创建一个可以呈现其子项的反应HOC,然后在所有之后,孩子们已经完成更新但是在DOM更新之前,将决定提高(或不提高)错误,取决于孩子们会更新的一些标志。

<Try alternative=... >
  ... do some stuff // if anybody in here sets a flag we will
                    // render alternative instead
</Try>

为什么呢?允许Try的所有子节点完成渲染然后如果有任何等待一些异步回调,以呈现替代方案将是有用的。有点像错误的边界,但所有封闭的孩子都会先重新渲染。

让第一个遇到这种情况的孩子提出错误并不起作用,因为它不允许其他孩子完成。

在Try中使用componentDidUpdate处理程序也不会工作,因为它不会运行,除非尝试实际更改(我认为)。

我希望有人知道可能有效的秘密或实验技巧。

由于

1 个答案:

答案 0 :(得分:0)

我认为你过于复杂。为什么不采取一种实现相同目标的简单方法呢?

你的回调会设置某种状态。这意味着,如果尚未设置状态,则回调尚未运行。

在您的子组件中,您可以检查状态是否已设置。如果尚未设定州;然后,显示“请等待”消息。

“请等待”消息可以提取到自己的组件中,并在整个网站中使用。通过提取“请稍候”封面的代码,所有组件都可以使用它而不是实现他们自己版本的“请稍候”封面。

我认为这比你建议的更简单有效。

编辑:

关于评论中提到的闪烁。这不应该发生。我试图去的地方是“请等待”的“封面”组件。

子组件会检查它的状态,看它是否已准备好显示它的主要内容。如果没有,子组件将使用Cover组件。

换句话说:

  1. 构建子组件
  2. 子组件的状态尚未就绪。儿童使用封面组件
  3. 子组件的状态更改(由于异步回调)
  4. 子组件启动重新渲染过程
  5. 子组件的状态已准备好呈现主要内容
  6. 子组件呈现自己的内容
  7. 这与您的评论所说的根本不同。父母不会呈现封面。当孩子还没准备好呈现自己的内容时,他会使用Cover组件。