在React.js中隱藏組件的正確方法

Question

假設您將一個名爲show的道具傳遞給組件。如果prop值爲true，則應正常渲染完整組件。如果它是假的，你不應該顯示任何東西。

您可以通過兩種方法來完成。

1. 在組件的渲染方法中返回null。
2. 將包含display: none屬性的CSS類應用於組件的DOM元素。

哪些是正確的還是首選的方式？

Answer 1

大部分情況下，您的兩種解決方案是可以互換的。他們都「工作」很好。

我會在選擇使用哪種方法時提出預先優化的警告。如果你確實需要修改你的代碼並嘗試另一種方法，這是一個非常簡單的交換，並且不應該成爲一個障礙。所以不要擔心，直到有理由擔心它爲止。

Answer 2

如果您認爲您需要再次顯示該組件，那麼在該頁面生命週期中，我會推薦使用css方式，因爲在這種情況下對DOM操作的影響會更小。在其他一些情況下，返回null可能會更有幫助。

Answer 3

我不認爲這個問題會有明確的答案。每種方法都有其優點和缺點。

使用CSS您有：

• 它可能工作得更快
• 沒有必要去想如果再次顯示控制恢復子控制狀態。

與返回的null：

• 呈現的DOM可能是相當小的總。如果您有許多可能隱藏的組件，這一點很重要。
• 在呈現的html中不會有衝突。可以說你有表格視圖。每個選項卡都是自己的複雜形式，並帶有許多子控件。如果你有一些原始的javascript/jquery /不管用他們的id/classnames等等 - 很難確保每個tab/form都有唯一的id，除非你不渲染它們。

從我的角度來看，決定將基於您的控制結構。如果它的結構複雜，嵌套的孩子很多，並且在再次開啓時沒有任何恢復狀態的方法 - 請使用CSS，但我認爲這只是一個短期解決方案，僅適用於非常簡單的控件。在所有其他情況下，我會不去渲染組件。