如何在React中实现可复用组件并处理鼠标事件传播问题

我完全懂你的痛点——用stopPropagation()确实能快速堵住冒泡，但这种隐式依赖会把组件死死绑定在一起，复用性直接大打折扣。用声明式状态管理（比如Redux）来控制点击权限，绝对是更优雅的解耦方案，核心思路就是用全局状态维护当前"允许响应点击"的组件标识，让每个组件自己判断要不要执行回调，完全不用管其他组件的存在。

下面我给你一步步拆解具体实现：

1. 定义Redux状态与核心动作 #

首先我们需要在Redux里维护一个简单状态，用来标记当前哪个组件是"活跃"的（也就是可以响应点击的）：

// redux/slices/clickableSlice.js
import { createSlice } from '@reduxjs/toolkit';

const clickableSlice = createSlice({
  name: 'clickable',
  initialState: {
    activeClickableId: null, // 存储当前活跃组件的唯一ID，初始为null
  },
  reducers: {
    setActiveClickable: (state, action) => {
      state.activeClickableId = action.payload;
    },
    clearActiveClickable: (state) => {
      state.activeClickableId = null;
    },
  },
});

export const { setActiveClickable, clearActiveClickable } = clickableSlice.actions;
export default clickableSlice.reducer;

记得把这个slice加到你的Redux store配置里。

2. 封装自定义Hook实现点击逻辑复用 #

为了让所有可点击组件都能快速接入这个逻辑，我们写一个自定义HookuseClickable，把状态判断和动作触发的逻辑封装进去：

// hooks/useClickable.js
import { useDispatch, useSelector } from 'react-redux';
import { setActiveClickable, clearActiveClickable } from '../redux/slices/clickableSlice';

export const useClickable = (componentId, onClickCallback) => {
  const dispatch = useDispatch();
  const activeId = useSelector(state => state.clickable.activeClickableId);

  const handleClick = (e) => {
    // 如果当前组件已经是活跃状态，可选择清空状态（比如双击取消）
    if (activeId === componentId) {
      dispatch(clearActiveClickable());
      return;
    }

    // 只有当没有活跃组件，或者当前组件就是活跃组件时，才执行回调并更新状态
    if (activeId === null || activeId === componentId) {
      onClickCallback(e);
      dispatch(setActiveClickable(componentId));
    }
  };

  return handleClick;
};

这个Hook的逻辑很直白：每次点击时，先检查当前活跃的组件是不是自己，如果是就清空状态；如果没有活跃组件，就执行自己的回调并标记自己为活跃——这样其他组件看到活跃ID不是自己，自然不会响应点击了。

3. 改造你的可点击组件 #

现在把OuterClickableArea和InnerClickableArea改成用这个Hook的形式，完全不用关心对方的存在：

// components/OuterClickableArea.js
import { useClickable } from '../hooks/useClickable';
import { InnerClickableArea } from './InnerClickableArea';

export const OuterClickableArea = () => {
  const handleOuterClick = () => {
    console.log('Outer area clicked!');
    // 这里写Outer的业务逻辑
  };

  // 传入唯一ID和回调
  const clickHandler = useClickable('outer-clickable', handleOuterClick);

  return (
    <div style={{ padding: '20px', border: '2px solid blue' }} onClick={clickHandler}>
      Outer Clickable Area
      {/* Inner组件直接嵌套，无需特殊处理 */}
      <InnerClickableArea />
    </div>
  );
};

// components/InnerClickableArea.js
import { useClickable } from '../hooks/useClickable';

export const InnerClickableArea = () => {
  const handleInnerClick = () => {
    console.log('Inner area clicked!');
    // 这里写Inner的业务逻辑
  };

  // 传入唯一ID和回调
  const clickHandler = useClickable('inner-clickable', handleInnerClick);

  return (
    <div style={{ padding: '10px', border: '2px solid red', marginTop: '10px' }} onClick={clickHandler}>
      Inner Clickable Area
    </div>
  );
};

为什么这个方案更优？ #

• 完全解耦：两个组件之间没有任何直接依赖，甚至不知道对方的存在，复用性拉满——你可以把Inner放到任何其他组件里，或者把Outer和其他可点击组件组合，都不会有问题。
• 声明式状态：所有点击权限的逻辑都集中在Redux状态里，清晰可控，调试起来也方便。
• 扩展性强：如果以后需要三级嵌套，或者多个独立的可点击组，只需要给每个组件分配唯一ID就行，不用改核心逻辑。

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