React中首次点击Experience按钮时active类未生效的问题求解

问题描述 #

尝试在按钮点击时动态添加active类，但首次点击Experience按钮时该类并未生效，第二次点击才会添加。初始状态下About按钮带有active类。相关代码如下：

const aboutText:string = 'Lorem ipsum dolor';
const [text, setText] = useState<string>('');
const btnAbout = document.getElementById('aboutDescription');
const btnExperience = document.getElementById('experienceDescription');

const handleClickAbout = () => {
    setText('aboutDescription');
    btnAbout?.classList.add('active');
    btnExperience?.classList.remove('active');
}

const handleClickExperience = () => {
    setText('experienceDescription');
    btnExperience?.classList.add('active');
    btnAbout?.classList.remove('active');
}

return (
    <>
        <button className='btn-info active' onClick={handleClickAbout} id='aboutDescription'> About </button>
        <button className='btn-info' onClick={handleClickExperience} id='experienceDescription'> Experience </button>

        <div className='description-right'>
            {(text === 'aboutDescription' || text ==='') && aboutText}
            {text === 'experienceDescription' && 'Experience'}
        </div>
    </>
)

问题原因 #

直接通过document.getElementById操作DOM元素类名，不符合React状态驱动视图的设计逻辑。React中setState是异步操作，且组件渲染时DOM元素的挂载时机和你获取元素的时机不匹配，导致首次点击时DOM操作无法生效。

解决方案 #

改用状态控制按钮的active类，完全通过React数据流管理视图状态，避免直接操作DOM：

const aboutText:string = 'Lorem ipsum dolor';
// 新增状态管理当前激活的按钮
const [activeBtn, setActiveBtn] = useState<string>('aboutDescription');
const [text, setText] = useState<string>('');

const handleClickAbout = () => {
    setText('aboutDescription');
    setActiveBtn('aboutDescription');
}

const handleClickExperience = () => {
    setText('experienceDescription');
    setActiveBtn('experienceDescription');
}

return (
    <>
        {/* 根据activeBtn状态动态添加active类 */}
        <button 
            className={`btn-info ${activeBtn === 'aboutDescription' ? 'active' : ''}`} 
            onClick={handleClickAbout} 
            id='aboutDescription'
        > 
            About 
        </button>
        <button 
            className={`btn-info ${activeBtn === 'experienceDescription' ? 'active' : ''}`} 
            onClick={handleClickExperience} 
            id='experienceDescription'
        > 
            Experience 
        </button>

        <div className='description-right'>
            {(text === 'aboutDescription' || text ==='') && aboutText}
            {text === 'experienceDescription' && 'Experience'}
        </div>
    </>
)

说明 #

1. 新增activeBtn状态，初始值设为aboutDescription，对应初始激活的About按钮
2. 点击按钮时，更新activeBtn状态为对应按钮的id
3. 在按钮的className中，根据activeBtn的值动态判断是否添加active类

这种方式完全遵循React状态驱动视图的原则，不会出现DOM操作时机问题，同时代码更易维护、符合React开发规范。

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