React无状态组件能否使用CSS transitions？是否需转为有状态组件？

Absolutely! CSS transitions are fully compatible with functional components—you don’t have to convert to a class component to use them. The problem you’re facing is likely tied to how you’re triggering the transition, not the component being "stateless" (since modern functional components use hooks for state management).

Why Your Attempt Might Have Failed #

Functional components rely on hooks like useState or useReducer to manage state changes, which trigger re-renders. For CSS transitions to fire, the browser needs to detect a clear, tracked change in element styles between renders. If that change isn’t properly managed by React, the transition won’t trigger.

Fixes & Practical Examples #

Here are the most common fixes to get transitions working smoothly in your functional component:

• Use React state to toggle classes/styles
  The most reliable approach is to use useState to control a class or inline style that triggers the transition. Here’s a simple working example:

  import { useState } from 'react';
  
  function TransitionBox() {
    const [isExpanded, setIsExpanded] = useState(false);
  
    return (
      <div>
        <button onClick={() => setIsExpanded(!isExpanded)}>Toggle Box</button>
        <div className={`box ${isExpanded ? 'expanded' : ''}`}>
          Transition me!
        </div>
      </div>
    );
  }
  

  Corresponding CSS:

  .box {
    width: 100px;
    height: 100px;
    background: teal;
    transition: width 0.3s ease, height 0.3s ease;
  }
  
  .box.expanded {
    width: 200px;
    height: 200px;
  }
  

• Fix initial mount transition issues
  If you’re trying to trigger a transition when the component first mounts, the browser might skip it because the initial and target styles are applied in the same render. Use useEffect to delay the state change slightly:

  import { useState, useEffect } from 'react';
  
  function MountTransition() {
    const [isVisible, setIsVisible] = useState(false);
  
    useEffect(() => {
      // Wait for the component to mount before triggering the transition
      const timer = setTimeout(() => setIsVisible(true), 10);
      return () => clearTimeout(timer);
    }, []);
  
    return (
      <div className={`fade-in ${isVisible ? 'visible' : ''}`}>
        Appearing on mount!
      </div>
    );
  }
  

• Avoid direct DOM modifications
  Don’t use refs to manually change element styles—React won’t track these changes, so the browser won’t detect the style shift needed for a transition. Always use state to drive style/class changes.

Bottom Line #

Functional components are fully capable of handling CSS transitions. The key is to use React’s state management to create a clear, tracked style change between renders. No need to switch to a class component!

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