请问点击按钮切换Tabs的功能应该如何设计实现呢？

Question

大家好，请问一个问题：这样场景应该如何设计？

有一个需求是：（经常切换）切换titlebar上的按钮，列表栏/编辑区/设置栏的内容都会切换。
使用React开发框架。

功能就是：想要实现Tabs的功能，因为界面1（点击按钮1）的内容正在编辑，然后切换到界面2再切换到界面1，内容还是编辑中。（不会重新加载）

1、请问应该如何设计实现呢？ 是做三个一模一样的界面，点击按钮进行切换展示到最顶层是吗？
2、请问是否有其他的三方UI库可以直接使用呢？

Answer 1

通过使用状态管理和条件渲染来保持每个视图的状态
React示例

import React, { useState } from 'react';

const ListBox = ({ content }) => <div>{content}</div>;
const EditPage = ({ content }) => <div>{content}</div>;
const SettingsBar = ({ content }) => <div>{content}</div>;

const App = () => {
  const [activeTab, setActiveTab] = useState('tab1');
  const [tabContent, setTabContent] = useState({
    tab1: {
      listBox: '列表框内容1',
      editPage: '编辑页面内容1',
      settingsBar: '设置栏内容1',
    },
    tab2: {
      listBox: '列表框内容2',
      editPage: '编辑页面内容2',
      settingsBar: '设置栏内容2',
    },
    tab3: {
      listBox: '列表框内容3',
      editPage: '编辑页面内容3',
      settingsBar: '设置栏内容3',
    },
  });

  return (
    <div>
      <div className="tabs">
        <button onClick={() => setActiveTab('tab1')}>按钮1</button>
        <button onClick={() => setActiveTab('tab2')}>按钮2</button>
        <button onClick={() => setActiveTab('tab3')}>按钮3</button>
      </div>
      <div className="content">
        {activeTab === 'tab1' && (
          <>
            <ListBox content={tabContent.tab1.listBox} />
            <EditPage content={tabContent.tab1.editPage} />
            <SettingsBar content={tabContent.tab1.settingsBar} />
          </>
        )}
        {activeTab === 'tab2' && (
          <>
            <ListBox content={tabContent.tab2.listBox} />
            <EditPage content={tabContent.tab2.editPage} />
            <SettingsBar content={tabContent.tab2.settingsBar} />
          </>
        )}
        {activeTab === 'tab3' && (
          <>
            <ListBox content={tabContent.tab3.listBox} />
            <EditPage content={tabContent.tab3.editPage} />
            <SettingsBar content={tabContent.tab3.settingsBar} />
          </>
        )}
      </div>
    </div>
  );
};

export default App;

每个Tab的内容都保存在tabContent状态中。通过条件渲染，根据当前选中的Tab显示相应的内容。