React中不使用全局状态模式，如何从另一组件控制状态组件？

针对你提出的问题——不想用全局状态，但需要让多个不同位置的按钮控制同一个对话框，这里有几个可行的方案：

1. 状态提升 + 受控对话框组件 #

核心思路：把对话框的状态从组件内部提到所有触发器和对话框的共同父组件中，将对话框封装成受控组件，由外部传入open状态和关闭回调。

示例代码：

// 封装受控的FilterDialog，只负责渲染和接收外部控制
export const FilterDialog = ({ open, onClose }) => {
  return (
    <Dialog open={open}>
      <Button onClick={onClose}>关闭</Button>
      {/* 对话框的其他内容 */}
    </Dialog>
  );
};

// 在共同父组件中管理状态，所有按钮都能调用状态修改方法
export const AppLayout = () => {
  const [isFilterOpen, setIsFilterOpen] = useState(false);

  return (
    <>
      {/* 页面头部的触发按钮 */}
      <Button onClick={() => setIsFilterOpen(true)}>打开过滤器</Button>
      {/* 列表区域的触发按钮 */}
      <Button onClick={() => setIsFilterOpen(true)}>筛选列表</Button>
      {/* 受控对话框 */}
      <FilterDialog 
        open={isFilterOpen} 
        onClose={() => setIsFilterOpen(false)} 
      />
    </>
  );
};

这种方式逻辑清晰，符合React的单向数据流原则，是最推荐的方案，只要能找到共同的父组件就优先用它。

2. 自定义事件总线（无全局状态） #

如果触发器和对话框没有共同父组件，或者组件层级太深，状态提升不方便，可以用浏览器的自定义事件机制实现组件间通信，完全不需要全局状态。

示例代码：

// FilterDialog组件内部监听自定义事件
export const FilterDialog = () => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    // 监听打开对话框的事件
    const handleOpen = () => setOpen(true);
    // 监听关闭对话框的事件
    const handleClose = () => setOpen(false);

    window.addEventListener('openFilterDialog', handleOpen);
    window.addEventListener('closeFilterDialog', handleClose);

    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('openFilterDialog', handleOpen);
      window.removeEventListener('closeFilterDialog', handleClose);
    };
  }, []);

  return (
    <Dialog open={open}>
      <Button onClick={() => window.dispatchEvent(new CustomEvent('closeFilterDialog'))}>
        关闭
      </Button>
    </Dialog>
  );
};

// 任意位置的触发按钮
export const AnyTriggerButton = () => {
  return (
    <Button onClick={() => window.dispatchEvent(new CustomEvent('openFilterDialog'))}>
      打开过滤器
    </Button>
  );
};

这种方式通过事件触发来控制对话框，不需要共享状态，适合跨层级的组件通信场景。

3. Ref调用组件内部方法 #

可以通过useImperativeHandle把对话框的控制方法暴露给外部，让外部组件通过Ref直接调用，从而控制对话框的显示。

示例代码：

// FilterDialog组件暴露open/close方法
export const FilterDialog = forwardRef((_, ref) => {
  const [open, setOpen] = useState(false);

  // 向外部暴露控制方法
  useImperativeHandle(ref, () => ({
    open: () => setOpen(true),
    close: () => setOpen(false)
  }));

  return (
    <Dialog open={open}>
      <Button onClick={() => setOpen(false)}>关闭</Button>
    </Dialog>
  );
});

// 父组件中用Ref控制对话框
export const ParentComponent = () => {
  const filterDialogRef = useRef(null);

  return (
    <>
      <Button onClick={() => filterDialogRef.current?.open()}>打开对话框</Button>
      <Button onClick={() => filterDialogRef.current?.open()}>另一个打开按钮</Button>
      <FilterDialog ref={filterDialogRef} />
    </>
  );
};

这种方式适合需要直接操作对话框实例的场景，但要注意不要过度使用Ref，避免破坏React的单向数据流。

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