React中如何实现Button组件全局互斥激活（无需父组件管理状态）

因为要求同一时间只有一个Button激活，且不能在父组件（App）里添加额外状态，我们可以用全局状态+回调通知的方式来实现，让所有Button共享同一个激活状态：

步骤1：添加全局状态管理逻辑 #

在Button组件外部定义全局变量，用来存储当前激活的按钮编号，以及管理所有按钮的状态更新回调：

// 全局存储当前激活的按钮number
let activeButtonNumber = null;
// 存储所有按钮的状态更新函数，用来通知所有按钮同步状态
const updateCallbacks = new Set();

// 全局方法：设置激活的按钮，并通知所有按钮更新状态
function setActiveButton(number) {
  activeButtonNumber = number;
  updateCallbacks.forEach(cb => cb());
}

步骤2：修改Button组件 #

让Button组件不再独立维护active状态，而是依赖全局状态，并监听全局状态的变化：

import { useState, useEffect } from 'react';

// 上面的全局状态代码放在这里

function Button({ startActive, number }) {
  const [active, setActive] = useState(startActive ?? false);

  // 组件挂载时注册状态更新回调；卸载时移除
  useEffect(() => {
    // 同步当前按钮状态与全局状态的函数
    const syncActiveState = () => {
      setActive(activeButtonNumber === number);
    };
    updateCallbacks.add(syncActiveState);

    // 初始化时，如果startActive为true，设置全局激活状态
    if (startActive) {
      setActiveButton(number);
    }

    // 组件卸载时清理回调，避免内存泄漏
    return () => {
      updateCallbacks.delete(syncActiveState);
    };
  }, [number, startActive]);

  // 点击按钮时，调用全局方法设置自己为激活状态
  const handleClick = () => {
    setActiveButton(number);
  };

  return (
    <button className={`${active ? 'active' : ''}`} onClick={handleClick}>
      {number}
    </button>
  );
}

// App组件无需修改
function App() {
  return (
    <>
      <Button startActive={true} number={1} />
      <Button number={2} />
      <Button number={3} />
    </>
  );
}

原理说明 #

1. 全局变量activeButtonNumber记录当前唯一激活的按钮编号，所有Button都通过这个值判断自己是否激活。
2. 任意Button被点击时，调用setActiveButton更新全局编号，并触发所有注册的回调函数，让每个Button同步自己的激活状态。
3. 组件挂载时注册回调、卸载时移除，避免内存泄漏。
4. 初始化时若startActive为true，会自动设置全局激活状态，确保初始只有一个按钮处于激活状态。

这样修改后，不管Button在项目的哪个位置调用，同一时间都只会有一个处于激活状态，且完全不需要在父组件中添加额外状态。

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