React中目标元素类名判断与addClass/removeClass切换的技术问询

Hey there! Let's break down how to handle this class toggle in React properly—since React encourages working with state rather than directly manipulating the DOM whenever possible, I'll cover both the recommended state-driven approach and a direct DOM manipulation method (just in case you need it for edge cases).

Recommended: State-Driven Class Toggle #

This is the most "React-like" way to handle class changes, as it leans into React's data-driven philosophy and avoids direct DOM tampering. Here's how it works:

• Use a boolean state to track whether the target class should be active
• Dynamically build the className string for your target element based on that state
• Toggle the state when you need to trigger the class change

import { useState } from 'react';

function ToggleClassComponent() {
  // Initialize state: set to false if the element starts without the target class
  const [isTargetClassActive, setIsTargetClassActive] = useState(false);
  const targetClass = 'highlighted';

  const handleToggle = () => {
    // Flip the state value (prev ensures we use the latest state)
    setIsTargetClassActive(prevState => !prevState);
  };

  return (
    <div>
      {/* Only apply the target class if the state is true */}
      <div
        className={`box ${isTargetClassActive ? targetClass : ''}`}
        onClick={handleToggle}
      >
        Click to toggle the "highlighted" class!
      </div>
    </div>
  );
}

This method guarantees only your target element is affected, and React handles updating the DOM efficiently behind the scenes.

Direct DOM Manipulation (For Edge Cases) #

If you need to interact with a DOM element directly (e.g., for third-party UI components), use useRef to grab the element and leverage the native classList API. The toggle() method does exactly what you need—it adds the class if it's missing, and removes it if it exists:

import { useRef } from 'react';

function DirectDomToggleComponent() {
  const targetElementRef = useRef(null);
  const targetClass = 'highlighted';

  const handleToggle = () => {
    // Make sure the ref is attached to a DOM element first
    if (targetElementRef.current) {
      // Auto-handles add/remove based on current class presence
      targetElementRef.current.classList.toggle(targetClass);
    }
  };

  return (
    <div>
      <div
        ref={targetElementRef}
        className="box"
        onClick={handleToggle}
      >
        Click to toggle the "highlighted" class!
      </div>
    </div>
  );
}

Bonus: Explicit Check & Modify #

If you need to run extra logic when adding/removing the class, use classList.contains() to explicitly check:

if (targetElementRef.current) {
  const element = targetElementRef.current;
  const hasTargetClass = element.classList.contains(targetClass);
  
  if (hasTargetClass) {
    element.classList.remove(targetClass);
    console.log('Class removed!');
  } else {
    element.classList.add(targetClass);
    console.log('Class added!');
  }
}

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