爲什麼我的諾言在答案中得到解決後會出現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中爲開發人員創建不需要的魔術節點，這應該讓事情變得更加清晰。