Modal 上的反应过渡组

Question

我有条件地渲染一个模态框，数据在上一次点击时被渲染到其中，一旦模态框关闭，该数据就会从状态中删除。（所有与modal相关的数据都存储在父组件中）。

现在我正在使用 react-transition-group 中的 CSSTransition，为 Modal 的 mounting/unmounting 设置动画，调用 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 组件仍然呈现，在我的情况下它给出错误，因为 modal.data 很快变为 null当我从模式中点击关闭按钮时，在模式中发送 null，导致错误。

Answer 1

我不能确定你的其余代码，但看起来你要处理的事情太多了。您可以在沙箱示例中看到一种干净的方式来动画模态进出。

<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.

做所有模态的方法

此外，当您访问一个对象的属性时，该对象的状态会更改为 null 或从 null 更改状态，最好在引用它时使用 optional chaining。

例如

modal?.data

它是一种语法糖，用于在访问其属性之前检查对象是否存在

如果您绝对需要保持组件呈现，那么您将需要删除 unmountOnExit，但根据您描述的问题：

modal.data becomes null as soon as I hit the close button

那么您的问题应该可以通过可选链接来解决。如果保持组件挂载，您可能需要使用 css 隐藏它，或者确保 Modal 组件中只有空内容。

Modal 上的反应过渡组

react-transition-group on Modal

javascript

modal-dialog

reactjs

react-transition-group