当前位置：首页 > React

react实现切换面板

2026-01-27 06:24:07React

使用状态管理切换面板

在React中，可以通过useState钩子来管理当前显示的面板状态。定义一个状态变量存储当前激活的面板标识，通过点击事件切换状态值。

import React, { useState } from 'react';

function TabPanel() {
  const [activePanel, setActivePanel] = useState('panel1');

  return (
    <div>
      <button onClick={() => setActivePanel('panel1')}>面板1</button>
      <button onClick={() => setActivePanel('panel2')}>面板2</button>

      {activePanel === 'panel1' && <div>面板1内容</div>}
      {activePanel === 'panel2' && <div>面板2内容</div>}
    </div>
  );
}

动态渲染面板组件

对于更复杂的场景，可以将面板内容抽象为独立组件，通过动态渲染方式切换。这种方法适合面板内容较多或结构复杂的情况。

const Panel1 = () => <div>第一个面板内容</div>;
const Panel2 = () => <div>第二个面板内容</div>;

function App() {
  const [currentPanel, setCurrentPanel] = useState(<Panel1 />);

  return (
    <div>
      <button onClick={() => setCurrentPanel(<Panel1 />)}>显示面板1</button>
      <button onClick={() => setCurrentPanel(<Panel2 />)}>显示面板2</button>
      {currentPanel}
    </div>
  );
}

使用CSS控制面板显示

结合CSS可以实现平滑的过渡效果。通过给面板添加样式类名，利用CSS的display或visibility属性控制显示隐藏。

function TabPanel() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <div className="tabs">
        {['面板1', '面板2'].map((tab, index) => (
          <button 
            key={index}
            className={activeIndex === index ? 'active' : ''}
            onClick={() => setActiveIndex(index)}
          >
            {tab}
          </button>
        ))}
      </div>

      <div className="panels">
        <div className={`panel ${activeIndex === 0 ? 'show' : 'hide'}`}>
          面板1内容
        </div>
        <div className={`panel ${activeIndex === 1 ? 'show' : 'hide'}`}>
          面板2内容
        </div>
      </div>
    </div>
  );
}

对应CSS样式：

.panel {
  transition: opacity 0.3s ease;
}
.panel.show {
  opacity: 1;
  display: block;
}
.panel.hide {
  opacity: 0;
  display: none;
}

使用第三方库实现高级功能

对于需要更丰富功能的场景，可以考虑使用react-tabs等专门库。这些库提供了预构建的选项卡组件，支持无障碍访问、键盘导航等特性。

react实现切换面板

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

function Demo() {
  return (
    <Tabs>
      <TabList>
        <Tab>面板1</Tab>
        <Tab>面板2</Tab>
      </TabList>

      <TabPanel>
        <div>第一个面板内容</div>
      </TabPanel>
      <TabPanel>
        <div>第二个面板内容</div>
      </TabPanel>
    </Tabs>
  );
}