使用React Hooks实现HTML元素互斥添加/移除active类名的方案咨询

你可以将原本布尔类型的状态改为存储当前处于激活状态的组件标识，就能快速实现互斥激活的效果，具体修改如下：

1. 调整状态定义与点击逻辑 #

把isActive布尔值替换为存储当前激活项的字符串，点击对应组件时直接把状态设为对应组件的标识即可，同时注意你原代码里InlineBlockLogIn写了固定的active类，会导致该组件永久带这个类，需要删掉：

import React , {useState} from 'react';
import classNames from 'classnames';
function App () {
    // 状态可选值：'login'代表登录激活，'reg'代表注册激活，初始可设为null或者默认激活其中一个
    const [activeTab, setActiveTab] = useState('login');

    return (
        <>
            <InlineBlockLogIn 
                className={classNames({ 'active' : activeTab === 'login'})} 
                onClick={() => setActiveTab('login')} 
            />
            <InlineBlockReg 
                className={classNames({ 'active' : activeTab === 'reg'})} 
                onClick={() => setActiveTab('reg')} 
            />
        </>
    );
};

2. 逻辑说明 #

• 点击登录组件时，状态直接设置为login，此时只有登录组件的active类判断条件成立
• 点击注册组件时，状态直接设置为reg，此时只有注册组件的active类判断条件成立
• 天然满足两个组件同一时间只有一个带有active类的互斥要求

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