React中非子组件Ref转发问题：如何跨多层组件判断导航栏点击？

Let's break down a few clean, maintainable solutions that avoid passing refs through 10+ layers or using deprecated APIs, tailored to your Redux setup:

1. Use a Unique CSS Selector to Target the Navbar Directly #

If your navbar has a consistent, unique class name (like app-navbar) or ID, you can directly query the DOM element without needing refs at all. This is the simplest approach if your navbar's DOM structure is stable.

document.addEventListener('mousedown', this.handleOutsideClick);

handleOutsideClick = (e) => {
  // Query the navbar root element using its unique selector
  const navbar = document.querySelector('.app-navbar');
  if (!navbar || !navbar.contains(e.target)) {
    // Execute your outside click logic here
    console.log('Clicked outside navbar!');
  }
};

Pros: No component communication needed, minimal code, works regardless of component hierarchy.
Cons: Relies on the navbar having a stable, unique selector (if the class name changes later, this breaks).

2. Use Redux to Track Navbar Clicks #

Since you're already using Redux, you can create a temporary state flag to mark when the navbar is clicked, then check that flag in your global listener.

Step 1: Add Redux state and actions #

// actions.js
export const SET_NAVBAR_CLICK = 'SET_NAVBAR_CLICK';

export const setNavbarClick = (isClicked) => ({
  type: SET_NAVBAR_CLICK,
  payload: isClicked
});

// reducer.js
const initialState = {
  isNavbarClicked: false
};

export const uiReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_NAVBAR_CLICK:
      return { ...state, isNavbarClicked: action.payload };
    default:
      return state;
  }
};

Step 2: Update Navbar component to dispatch the action #

In your navbar root component, add a mousedown listener to set the flag:

import { useDispatch } from 'react-redux';
import { setNavbarClick } from './actions';

const Navbar = () => {
  const dispatch = useDispatch();

  const handleNavbarClick = (e) => {
    // Mark that the navbar was clicked
    dispatch(setNavbarClick(true));
    // Optional: Reset the flag after a tiny delay to avoid interfering with future clicks
    setTimeout(() => dispatch(setNavbarClick(false)), 100);
  };

  return (
    <nav className="app-navbar" onMouseDown={handleNavbarClick}>
      {/* Navbar content */}
    </nav>
  );
};

Step 3: Check the flag in your global listener #

In your component with the outside click logic:

import { useSelector, useDispatch } from 'react-redux';
import { setNavbarClick } from './actions';

const YourComponent = () => {
  const isNavbarClicked = useSelector(state => state.ui.isNavbarClicked);
  const dispatch = useDispatch();

  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (isNavbarClicked) {
        // Reset the flag and exit
        dispatch(setNavbarClick(false));
        return;
      }
      // Execute your outside click logic here
      console.log('Clicked outside navbar!');
    };

    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, [isNavbarClicked, dispatch]);

  // Rest of your component
};

Pros: Doesn't rely on DOM selectors, works even if the navbar's structure changes.
Cons: Adds a small amount of Redux boilerplate, requires coordinating state between components.

3. Use Custom Events to Mark Navbar Clicks #

Another approach is to dispatch a custom event from the navbar when it's clicked, then listen for that event in your global listener to set a temporary flag.

Step 1: Dispatch custom event from Navbar #

const Navbar = () => {
  const handleNavbarClick = (e) => {
    // Dispatch a custom event that bubbles up to the document
    const navClickEvent = new CustomEvent('navbar-click', { bubbles: true });
    e.target.dispatchEvent(navClickEvent);
  };

  return (
    <nav className="app-navbar" onMouseDown={handleNavbarClick}>
      {/* Navbar content */}
    </nav>
  );
};

Step 2: Listen for the custom event in your component #

const YourComponent = () => {
  useEffect(() => {
    let isNavbarClick = false;

    // Listen for the custom navbar click event
    const handleNavbarEvent = () => {
      isNavbarClick = true;
      // Reset the flag after a short delay
      setTimeout(() => isNavbarClick = false, 100);
    };

    const handleOutsideClick = (e) => {
      if (isNavbarClick) return;
      // Execute your outside click logic here
      console.log('Clicked outside navbar!');
    };

    document.addEventListener('navbar-click', handleNavbarEvent);
    document.addEventListener('mousedown', handleOutsideClick);

    return () => {
      document.removeEventListener('navbar-click', handleNavbarEvent);
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, []);

  // Rest of your component
};

Pros: No Redux or DOM selector dependencies, decouples components nicely.
Cons: Requires setting up custom event handling, slightly more code than the selector approach.

All these solutions avoid passing refs through deep component trees, don't use findDomNode, and let you keep your outside click logic clean. My top recommendation is the CSS selector approach if your navbar has a stable identifier—it's the most straightforward with the least overhead.

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