React是否使用display：none從DOM中刪除節點？

Question

在我們的JavaScript代碼中，一些節點的內聯樣式中定義了display:none。我們沒有看到瀏覽器呈現的DOM中的任何節點。在React或JavaScript中這是常見的事情嗎？

Answer 1

這與React或JavaScript完全無關。

這只是CSS。

display:none表示「根本不顯示此元素」。這不同於visibility:hidden順便說一句，因爲它只是使其不可見，但在頁面中留下它的位置。

Answer 2

它們應該由React渲染，但由於CSS規則而隱藏。

如果您根本不想渲染組件，則可以使用內聯條件。例如。 （使用jsx）：

render: function() { 
    var isVisible = determineIfVisible(); 
    return (
     <MyComponentParent> 
     {(isVisible) 
     ? <MyComponent /> 
     : '' 
     } 
     </MyComponentParent> 
    ); 
}