Javascript 反应：我可以返回上一次渲染的结果吗？

我有以下情况：

• 为了显示模式对话框，我需要首先收集一些信息并将其存储在redux中
• 我需要使用的模式库使用包装器门户组件来支持动画。这总是在反应树中
• 然而，只有当我有

  isOpen=true

• 开始的动画效果很好，但由于我有条件地渲染了模式，结束的动画会中断，因为模式在关闭后消失

我不确定我解决这个问题的想法是否可以接受：

const RenderComponent = (props) => {
    const content = useRef(null);
    if (props.isOpen) {
        content.current = props.render();
    }
    return content.current;
};

如果模式尚未打开（打开意味着所有数据都可用），则返回null。这没关系，因为动画只有在打开时才开始

一旦打开，它将把内容呈现为引用并返回该引用。将其存储在引用中还允许我在isOpen变为false时返回它，因为它仍然需要为动画渲染

所以我的问题是：返回上一次渲染的结果可以吗，还是会导致不可预测的行为

编辑：更详细一点：

（公司范围的）模式库有两个组件：

ModalPortal

和

Modal

我使用上述组件（简化代码）：

const节点=(
(
内容
)}
/>
);

我认为最好从功能组件转向基于类的组件，这样您就可以更好地控制每个组件中的状态以及希望发生的事情

一种选择是记住模态的三种状态，而不是两种：“打开”、“关闭”、“关闭”。因为我不知道您的代码的其余部分，所以我将在这里编写一些非常通用的代码来帮助说明我的建议。最好在你的问题中多分享一些，因为用更多的信息来帮助你会更容易

export const ModalStates = {
     "OPEN" : 1,
     "CLOSING" : 2,
     "CLOSED" : 3
};

export default class ModalComponent {
    constructor(props){
    super(props);
    this.state = {
        'modal_state' : ModalStates.CLOSED
    };
}

render () {
    if(this.state.modal_state != ModalStates.CLOSED)
        return <div class="moda">Your modal HTML here</div>;
}

export const ModalStates={
“开放”：1，
“结束”：2，
“已关闭”：3
};
导出默认类ModalComponent{
建造师（道具）{
超级（道具）；
此.state={
“modal_状态”：ModalStates.CLOSED
};
}
渲染（）{
if（this.state.modal_state！=ModalStates.CLOSED）
在这里返回您的模式HTML；
}

}

这当然需要扩大。在这里，您需要将模态更改为打开和其他状态的逻辑。其思想是，当您希望关闭模态时，步骤可以是：

将模式状态更改为关闭

制作动画

动画完成后，模态状态应更改为“关闭”，以便不再渲染

---

希望这有助于指导您。

这需要更改（公司范围的）模式库。我不确定这是否可行，但我想我可以问一下。仍然在想我最初的方法是否没有问题（除了它的丑陋）。给我几分钟的时间，我将对原来的问题进行扩展，让你有更多的见解。原来的帖子现在有了更多的细节。

export const ModalStates = {
     "OPEN" : 1,
     "CLOSING" : 2,
     "CLOSED" : 3
};

export default class ModalComponent {
    constructor(props){
    super(props);
    this.state = {
        'modal_state' : ModalStates.CLOSED
    };
}

render () {
    if(this.state.modal_state != ModalStates.CLOSED)
        return <div class="moda">Your modal HTML here</div>;
}