登录 主页

React Tabs 的使用

2024-08-30 04:38PM

可以使用 MUI(Material-UI)库中的 TabsTab 组件来创建标签页。

1. 确保安装了 MUI 依赖

如果还没有安装 MUI,可以使用以下命令来安装:

npm install @mui/material @emotion/react @emotion/styled

或者使用

yarn yarn add @mui/material @emotion/react @emotion/styled 

2. 使用 MUI 的 TabsTab 组件

以下是一个简单的示例,展示如何使用 MUI 的 TabsTab 组件来创建一个基本的标签页界面

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default class CalculationResultForDemo extends React.Component {
  state = {
    selectedTab: 0 // 跟踪所选选项卡的新状态
  }

  constructor(props) {
    super(props);
    this.renderResult = this.renderResult.bind(this);
    this.handleChangeTab = this.handleChangeTab.bind(this); // 绑定新方法
  }

  handleChangeTab(event, newValue) {
    this.setState({ selectedTab: newValue });
  }

  renderSummaryTable() {
    // 你现有的renderSummaryTable实现
  }

  renderMaterialTable() {
    // 你现有的renderMaterialTable实现
  }

  renderAlgorithmTable() {
    // 你现有的renderAlgorithmTable实现
  }

  renderResult() {
    return (
      <Box sx={{ width: '100%' }}>
        <Tabs value={this.state.selectedTab} onChange={this.handleChangeTab} aria-label="basic tabs example">
          <Tab label="总表" />
          <Tab label="物质表" />
          <Tab label="算法表" />
        </Tabs>
        <Box sx={{ p: 3 }}>
          {this.state.selectedTab === 0 && this.renderSummaryTable()}
          {this.state.selectedTab === 1 && this.renderMaterialTable()}
          {this.state.selectedTab === 2 && this.renderAlgorithmTable()}
        </Box>
      </Box>
    );
  }

  render() {
    return (
      <div>
        {this.renderResult()}
      </div>
    );
  }
}

页面实现情况如下:

 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论