在我的承诺得到解决后，为什么会出现MDL旋转器残留？

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>

为什么在我的承诺解决后附加了这个微调器残留物？ 我在做概念错误的事情吗？它与React或MDL有关吗？​​

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

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

修改

感谢Garbee's answer我最终得到了这个解决方案：

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

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。我假设反应只是创建然后破坏节点（这使我质疑它是如何升级在提供的示例案例中，因为我不明白。）其中，取决于如何摧毁它可能会留下一些残余。

在MDL 1.x中无法做到这一点。我们在2.x中工作，不为开发人员创建魔术节点，这样可以使事情变得更加清晰。