React是否從DOM移除display：none的節點？

Question

在我們的JavaScript代碼中，某些節點具有display:none的內聯樣式。 我們在瀏覽器呈現的DOM中看不到任何這些節點。 在React或JavaScript中這很常見嗎？

Answer 1

這與React或JavaScript完全無關。

那只是CSS。

display:none表示“根本不顯示此元素”。 這與visibility:hidden不同visibility:hidden順便說一句，這只是使其不可見，而是將其保留在頁面中。

Answer 2

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

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

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