react电梯导航组件

以下是一个React电梯导航组件的示例代码，该组件可用于将网页分层，使用户可以轻松地在不同层之间导航。

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './ElevatorNav.css';

const ElevatorNav = ({ floors, currentFloor, onFloorChange }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleFloorClick = (floor) => {
    onFloorChange(floor);
    setIsExpanded(false);
  };

  const renderFloorButton = (floor) => (
    <button
      key={floor}
      className={`elevator-nav__floor-button ${floor === currentFloor ? 'elevator-nav__floor-button--active' : ''}`}
      onClick={() => handleFloorClick(floor)}
    >
      {floor}
    </button>
  );

  return (
    <div className="elevator-nav">
      <div className="elevator-nav__current-floor">{currentFloor}</div>
      <button className="elevator-nav__expand-button" onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '收起' : '展开'}
      </button>
      {isExpanded && (
        <div className="elevator-nav__floor-buttons">
          {floors.map((floor) => renderFloorButton(floor))}
        </div>
      )}
    </div>
  );
};

ElevatorNav.propTypes = {
  floors: PropTypes.arrayOf(PropTypes.number).isRequired,
  currentFloor: PropTypes.number.isRequired,
  onFloorChange: PropTypes.func.isRequired,
};

export default ElevatorNav;

该组件接受三个属性：

- `floors`: 一个数字数组，表示楼层数。
- `currentFloor`: 当前所在楼层。
- `onFloorChange`: 一个回调函数，当用户点击某个楼层时调用该函数，将所选楼层作为参数传入。

该组件渲染一个电梯导航，包含当前所在楼层和一个展开/收起按钮。当用户点击展开按钮时，将显示所有楼层的按钮。用户可以点击任何一个按钮以导航到相应的楼层。当前所在楼层的按钮将突出显示。