React组合组件交互异常：内嵌子组件CSS过渡效果无法生效问题

架构老林

2026-4-27

问题排查与解决方案

咱们一步步拆解问题，先修正基础语法错误，再解决核心的过渡失效问题：

1. 先纠正两处语法硬伤

React类名属性错误：React里不能用class来指定元素类名，必须用className（因为class是JavaScript的保留关键字）。你代码里的class='rotating_button'和class='menu'都是错误写法，改成className='rotating_button'和className='menu'才能让React正确识别类名。
CSS属性拼写错误：CSS里没有background_color这种写法，正确的是background-color，这个拼写问题可能会干扰样式的正常解析。

2. 核心问题：内部组件重复定义打断过渡

你把IconButton嵌套在Menu组件内部定义，这会导致每次Menu重新渲染时，IconButton都会被重新创建成一个全新的组件。React会把它识别成不同的组件类型，进而卸载旧的实例、挂载新的实例——这种频繁的销毁重建会直接打断CSS过渡动画的执行流程，导致过渡效果完全触发不了。

修复方案：把`IconButton`改成独立组件

把IconButton移到Menu组件外面，作为独立的组件定义：

import React from 'react';

// 独立定义IconButton，避免每次Menu渲染都重建
function IconButton() {
  return (
    <div className='rotating_button'>
      {/* 其他代码... */}
      <button></button>
      {/* 其他代码... */}
    </div>
  );
}

export default function Menu() {
  return (
    <div className='menu'>
      <IconButton />
      {/* 菜单其余代码 */}
    </div>
  );
}

同时修正CSS的拼写问题，并且明确指定过渡的属性（更严谨）：

.rotating_button {
  background-color: red;
  width: 50px;
  height: 50px;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}
.rotating_button:is(:hover, :focus) {
  transform: rotate(180deg);
}