为什么我的 promise 在 react 中 resolve 后会有 MDL spinner 残留？

Question

我试图在获取我的 API 时显示一个微调器，然后用我从 API 调用中收到的结果替换这个微调器。

基本上我有一个 isFetching 状态设置为 true 直到我的承诺得到解决，所以我的渲染函数看起来像这样：

render: function() {
  if (this.state.isFetching) {
    return <div className="mdl-spinner mdl-js-spinner is-active" />;
  } else {
    return <div>This is where I display my results.</div>;
  }
}

它运行良好并且对我来说似乎合乎逻辑，但是随着呈现的函数变得更加复杂，微调器附加到返回的 html。

<div>This is where I display my results.</div>
<!-- The appeneded spinner, each div corresponding to a color (yellow, green, blue, red) -->
<div class="mdl-spinner__layer mdl-spinner__layer-1"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-2"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-3"></div>
<div class="mdl-spinner__layer mdl-spinner__layer-4"></div>

为什么在我的 promise 解决后附加了这个微调器残留物？ 我在概念上做错了什么吗？跟React or MDL有关系吗？

我做了一个 JS fiddle，我设法重现了这个问题。

请注意，如果您简化 <SubComponent /> 的渲染函数（例如通过删除 img 标记，则不会出现该问题）。

编辑

感谢我最终得到了这个解决方案：

为确保节点（负责为样式创建内部节点）在升级后被正确销毁，将其（在本例中为微调器）包装在另一个元素节点中。

render: function() {
  if (this.state.isFetching) {
    return (
      <div>
        <div className="mdl-spinner mdl-js-spinner is-active" />
      </div>
    );
  } else {
    return <div>This is where I display my results.</div>;
  }
}

更新后JS fiddle.

Answer 1

这是因为微调器在初始化时是 creating internal nodes for styling。我假设 React 只是创建然后销毁节点（这让我质疑它是如何 upgraded 在提供的示例案例中因为我没有看到它。）这取决于如何它破坏了它可能会留下一些杂物。

在 MDL 1.x 中对此无能为力。我们正在 2.x 努力为开发人员创建魔法节点，这应该会让事情变得更清楚。

为什么我的 promise 在 react 中 resolve 后会有 MDL spinner 残留？

Why is there a MDL spinner residue after my promise is resolved in react?

promise

reactjs

material-design-lite

编辑