React中useState更新后JSX元素消失，active类丢失求助

你的代码里有两个核心问题导致了active类丢失、元素消失的现象：

1. 随机key触发组件强制重挂载 #

你给外层的.firefox容器添加了key={Math.random()}，每次组件状态更新（比如调用setUrl修改URL），这个随机key都会生成新值。React会将key变化的组件判定为全新组件，直接卸载旧DOM节点并创建新节点——之前通过toggle函数添加的active类会因为DOM被重建而完全丢失，导致元素消失。

2. 直接操作DOM违背React数据流 #

你通过document.getElementsByClassName这类原生DOM方法添加/移除类，绕开了React的状态管理逻辑。当组件重新渲染时，React会根据当前state重新生成DOM结构，直接操作的DOM类名会被覆盖或重置。

修复方案 #

方案一：移除随机key，用React状态控制类名

这是最符合React开发规范的解决方案：

1. 删掉key={Math.random()}，避免组件被强制重挂载
2. 添加isActive状态来控制active类的显示
3. 把DOM操作改成通过state控制UI，保证状态与UI同步

import React, { useState } from 'react';
// 导入部分保持不变

export const FirefoxApp = ({ onToggle }) => {
    const toggle = () => {
        document.getElementsByClassName('FirefoxApp')[0].classList.add('clicked')
        setTimeout(() => {
            onToggle(true);
        }, 500);
    };
    
    return (
        <DockItem id='firefox' className="FirefoxApp" title='Firefox' icon='https://raw.githubusercontent.com/yeyushengfan258/Citrus-icon-theme/7fac80833a94baf4d4a9132ea9475c2b819b5827/src/scalable/apps/firefox.svg' onClick={toggle}/>
    )
};

export const FirefoxStartApp = ({ onToggle }) => {
    const toggle = () => {
        document.getElementsByClassName('StartMenuWrapper')[0].classList.remove('active');
        document.getElementsByClassName('Header')[0].classList.add('active');
        document.getElementsByClassName('DesktopBody')[0].classList.add('active');
        document.getElementsByClassName('FirefoxApp')[0].classList.add('clicked')
        setTimeout(() => {
            onToggle(true);
        }, 500);
    };

    return (
        <StartApp key='firefox' icon='https://raw.githubusercontent.com/yeyushengfan258/Citrus-icon-theme/7fac80833a94baf4d4a9132ea9475c2b819b5827/src/scalable/apps/firefox.svg' name='Firefox' onClick={toggle}/>
    )
}

export default function Firefox() {
    const [url, setUrl] = useState('');
    const [isActive, setIsActive] = useState(false); // 新增控制窗口激活的状态

    const isValidURL = (string) => {
        var res = string.match(
          /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/g
        );
        return res !== null;
    };

    const action = (e) => {
        if (e.key === 'Enter') {
            var qry = e.target.value;
    
            if (isValidURL(qry)) {
              if (!qry.startsWith("http")) {
                qry = "https://" + qry;
              }
            } else {
              qry = "https://www.google.com/search?q=" + qry + '&igu=1';
            }
    
            e.target.value = qry;
            setUrl(qry); // 移除不必要的setTimeout，直接更新状态
        }
    }

    function close(){
        setIsActive(false); // 用状态控制active类
        document.getElementById('firefox').classList.remove('clicked');
        setTimeout(() => {setUrl('')}, 200);
    }

    function minimize(){
        document.getElementsByClassName('firefox')[0].classList.toggle('minimize');
    }

    function reload(){
        document.getElementById('iFrameFF').src = document.getElementById('iFrameFF').src;
    }

    return (
        <div className='FirefoxWindow'>   
                <div
                    className={`Window firefox ${isActive ? 'active' : ''}`}
                    {/* 移除key={Math.random()} */}
                >
                    <TopBar title='Firefox' onDblClick={minimize}>
                        <div className='TabBarWrapper'>
                            <div className='TabBar'>
                                <div className='TabBarItem' style={{ justifyContent: 'space-between' }}>
                                    <p>New Tab</p>
                                    <div className='CloseButton' onClick={close}>
                                        <i className="fa-regular fa-xmark"></i>
                                    </div>
                                </div>
                                <div className='TabBarItem' style={{ width: "100vw" }}>
                                    <div className='TabBarInteraction'>
                                        <i className="fa-regular fa-chevron-left"></i>
                                        <i className="fa-regular fa-chevron-right"></i>
                                        <i className="fa-regular fa-rotate-right" onClick={reload}></i>
                                    </div>
                                    <input className='TabSearch' type='text' spellCheck='false' placeholder='Search with Google or enter address' onKeyDown={action}/>
                                </div>
                            </div>
                        </div>
                        <div className='TopBarInteractionWrapper' style={{ display: 'flex' }}>
                            <TopBarInteraction action='hide'/>
                            <TopBarInteraction action='minMax' onMinMax={minimize}/>
                            <TopBarInteraction action='close' onClose={close}/>
                        </div>
                    </TopBar>
                    <WindowBody>
                        <div className='Firefox'>
                            {url === '' ? (
                                <div className='welcomepage'>
                                    <img src='https://raw.githubusercontent.com/yeyushengfan258/Citrus-icon-theme/7fac80833a94baf4d4a9132ea9475c2b819b5827/src/scalable/apps/firefox.svg' width='90px' height='90px'/>
                                    <h1>Welcome to Firefox on BreezeOS</h1>
                                    <p>Click the search bar on top to Google search or input URL address.</p>
                                </div>
                            ) : null}
                            <iframe id='iFrameFF' className='iFrameFF' src={url} title='New Tab' frameBorder='0'/>
                        </div>
                    </WindowBody>
                </div> 
        </div>
    )
}

方案二：快速临时修复（不推荐长期使用）

如果暂时不想重构状态管理，至少先移除key={Math.random()}，这样组件重新渲染时不会重建DOM，之前添加的active类就不会丢失：

<div
    className='Window firefox'
    // 删掉key={Math.random()}
>

额外优化建议 #

• 尽量避免直接操作DOM，所有UI状态通过React state控制，保证状态与UI的一致性
• 状态提升：将isActive状态提到FirefoxApp、FirefoxStartApp和Firefox的共同父组件中，通过props传递激活/关闭函数，彻底替代DOM操作
• 移除action函数里不必要的setTimeout，直接调用setUrl即可

内容的提问来源于stack exchange，提问作者cyplucastero