模態上的反應過渡組

Question

我有條件地渲染一個模態，在上一次點擊時將數據渲染到其中，一旦模態關閉，該數據就會從 state 中刪除。（與模態相關的所有數據都存儲在父組件中）。

現在我正在使用來自 react-transition-group 的 CSSTransition，為 Modal 的安裝/卸載設置動畫，調用 Modal 的代碼片段就像

<CSSTransition  
 in={modal.status && modal.state === 'MEDIA_INFO_MODAL'}  
 appear={true}  
 timeout={200}  
 nodeRef={modalRef}  
 classNames="my-node"  
 unmountOnExit  
\>
    <Modal ref={modalRef} modalClicker={modalHandler}>{modal.data}</Modal>
</CSSTransition>

正如在這個codesandbox中看到的那樣，關閉后的模態組件仍然呈現，在我的例子中它給出了錯誤，因為一旦我從模態中點擊關閉按鈕， modal.data就會變成null ，在模態中發送null ，導致錯誤。

Answer 1

我不能確定你的代碼的 rest，但看起來你有太多事情要做。 您可以在沙箱示例中看到一種干凈的方式來動畫模態進出。

<CSSTransition  
 in={modal.status && modal.state === 'MEDIA_INFO_MODAL'} 
 timeout={200} 
 classNames="my-node"  
 unmountOnExit  
\>
    <Modal modalClicker={modalHandler}>{modal?.data}</Modal>
</CSSTransition>

我不知道將 ref 從過渡傳遞到元素的原因，所以我把它拿出來了。 這個確切的方法就是我如何使用 react-transition-group 來處理我所有的模態。

此外，當您訪問 object 上的屬性時，將 state 更改為 null，最好在引用它時使用可選鏈接。

例如

modal?.data

它是一種語法糖，用於在訪問其屬性之前檢查 object 是否存在

如果您絕對需要保持組件呈現，那么您將需要刪除unmountOnExit ，但根據您描述的問題：

我一點擊關閉按鈕，modal.data 就變成了 null

那么您的問題應該通過可選鏈接來解決。 如果保持組件掛載，您可能需要使用 css 隱藏它，或者確保Modal組件中只有 null 內容。