React水平扩展问题求助：点击按钮无法实现Div容器宽度切换

你当前的实现核心问题在于两个关键疏漏：

1. 状态设计无法支撑宽度切换逻辑 #

你只用了布尔类型的isCollapsed状态，只能实现“显示/隐藏”的二元控制，但你需要的是不同宽度档位的切换（500px ↔ 900px ↔ 全屏），单一布尔值无法覆盖多状态切换的需求。

2. CSS类的样式逻辑错误 #

当前的.collapsed类应该是设置了display: none或height: 0这类隐藏样式，导致容器直接消失，而非调整宽度。你需要给不同状态的类设置对应的宽度值，而非隐藏元素。

修改后的实现方案 #

第一步：调整状态为多值类型 #

将布尔状态改为字符串类型，用来区分不同宽度模式，比如'small'（500px）、'medium'（900px）、'full'（全屏），实现灵活切换。

第二步：更新组件逻辑 #

优化按钮点击事件实现状态循环切换，同时调整类名和按钮文本：

const Collapse = ({ initialMode = 'small', children }) => {
  // 用字符串标记不同宽度模式：small/medium/full
  const [currentMode, setCurrentMode] = React.useState(initialMode);

  // 循环切换三种宽度模式
  const toggleMode = () => {
    switch(currentMode) {
      case 'small':
        setCurrentMode('medium');
        break;
      case 'medium':
        setCurrentMode('full');
        break;
      case 'full':
        setCurrentMode('small');
        break;
      default:
        setCurrentMode('small');
    }
  };

  // 根据当前状态生成对应按钮文本
  const getButtonText = () => {
    switch(currentMode) {
      case 'small':
        return '切换到900px宽度';
      case 'medium':
        return '切换到全屏';
      case 'full':
        return '切换到500px宽度';
      default:
        return '切换宽度';
    }
  };

  return (
    <div className="container">
      <button
        className="collapse-button"
        onClick={toggleMode}
      >
        {getButtonText()}
      </button>
      <div
        className={`collapse-content ${currentMode}`}
        aria-expanded={currentMode !== 'small'}
      >
        {children}
      </div>
    </div>
  )
}

第三步：编写对应CSS样式 #

给不同模式的类设置宽度，并添加过渡动画让切换更平滑：

.collapse-content {
  /* 默认基础样式 + 过渡动画 */
  transition: width 0.3s ease;
  padding: 1rem;
  background: #f0f0f0;
  border: 1px solid #ddd;
}

/* 小宽度档位：500px */
.collapse-content.small {
  width: 500px;
}

/* 中等宽度档位：900px */
.collapse-content.medium {
  width: 900px;
}

/* 全屏档位：占满视口宽度 */
.collapse-content.full {
  width: 100vw;
  /* 可选：去掉页面左右边距影响 */
  margin-left: calc(-50vw + 50%);
}

可选简化方案 #

如果只需要两种状态切换（比如500px ↔ 全屏），可以把状态改回布尔值，同时调整CSS和切换逻辑：

const Collapse = ({ initialSmall = true, children }) => {
  const [isSmall, setIsSmall] = React.useState(initialSmall);

  return (
    <div className="container">
      <button
        className="collapse-button"
        onClick={() => setIsSmall(!isSmall)}
      >
        {isSmall ? '切换到全屏' : '切换到500px宽度'}
      </button>
      <div
        className={`collapse-content ${isSmall ? 'small' : 'full'}`}
        aria-expanded={!isSmall}
      >
        {children}
      </div>
    </div>
  )
}

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