React中的條件呈現會導致重新掛載時切換

最近我一直在努力應對React，試圖理解如何正確控制可以通過幾種不同的東西顯示的有條件呈現元素（如對話框）。例如，項目列表可能每個都有自己的模式內容，但仍共享相同的模式。我不需要時只隱藏模式（display: none），並在需要時更改顯示。React中的條件呈現會導致重新掛載時切換

當我需要在每次顯示模式時重新初始化模態時，就會出現問題。舉例來說，模態包含一系列選項卡，當前選項卡索引以模態狀態存儲。在關閉並重新打開模式後，我預計當前標籤索引將重置爲零，但情況並非如此;而是它在隱藏模態之前留下的任何東西。

顯而易見的原因是，模型在初始渲染時只能安裝一次。後續的渲染更新不會重新運行掛載生命週期方法。顯然，解決方案必須包括隨時重新安裝組件（通常在再次顯示時）。

，我想出了一個可能的例子–的Dialog應該僅卸載並重新安裝時isDialogShown變化。我相當確定React能夠注意到這一點，並在isDialogShown標誌發生變化時正確運行生命週期方法。

... 
const ParentElement = ({ isElementShown }) => { 
    return (
    {!Boolean(isElementShown) 
     ? null 
     : <ConditionalElement prop={stuff} /> 
    } 
); 
} 
...

CodePen Example - Conditional Rendering

但是，我不知道這是否是做的最好的方式。我希望有一種方法可以將屬性傳遞給ConditionalElement本身，這會導致它重新渲染。如果屬性是一個特定的值，可能返回render()函數中的null？問題是我不認爲這會重置ConditionalElement本身，但可能是所有的孩子。

const ParentElement = ({ isElementShown }) => { 
    return (
     <ConditionalWrapper isShown={true}> 
     <ConditionalElement /> 
     <ConditionalWrapper/> 
    } 
); 
} 

const ConditionalWrapper = ({ children, isShown }) = { 
    // Don't render any children if the element should be hidden 
    // Also, styles would be applied to hide the wrapper if necessary 
    if (!isShown) { 
    return null; 
    } 

    // Render the children if not hidden 
    return children; 
};

第二種方式似乎不那麼「黑客」，但也有一點嵌套。無論如何會推薦它嗎？好的是，如果應保持本地狀態，兩種方式都能夠「切換」元素（取消/重新安裝）並「隱藏」它（display: none;）。這隻需要另一個參數（isToggled和isShown）。

來源

2017-05-20 Kendall Roth

如何重置'componentWillReceiveProps'中的狀態？ – Alik

第二種方法是好的IMO然而，如果你不喜歡更多嵌套的結果，你可以創建一個更高階的組件（HOC）來增強組件的行爲，增強組件的工作原理就像原始的，只是它意識到了一個'shouldRender'屬性，它將底層組件切換爲null。

const toTogglable = (Elem) => (props) => 
    props.shouldRender ? <Elem {...props}/> : null; 

const TogglableA = toTogglable(A); 
// Then you can use it like 
// <TogglableA shouldRender={true} {...otherProps} />

這種方法的另一個好處是，你得到composibility免費的，說如果要概括展示的行爲/隱藏通過屬性「shouldHide」，你可以創建另一個HOC，然後就撰寫他們爲了增強你的組件，結果總是一個平坦的組件。

檢查http://codepen.io/anon/pen/MmzpdG作爲一個工作的例子，基於你的。

來源

2017-05-20 18:22:47 Sheng

有趣的想法，我不熟悉HOCs，但這看起來不錯。謝謝！ –

React中的條件呈現會導致重新掛載時切換

回答

相關問題