Tab语义Ui React

import React from 'react';
import { Tab } from 'semantic-ui-react';

const panes = [
  {
    menuItem: 'Tab 1',
    render: () => <Tab.Pane>Content of Tab 1</Tab.Pane>
  },
  {
    menuItem: 'Tab 2',
    render: () => <Tab.Pane>Content of Tab 2</Tab.Pane>
  },
  {
    menuItem: 'Tab 3',
    render: () => <Tab.Pane>Content of Tab 3</Tab.Pane>
  }
];

const TabExample = () => (
  <Tab panes={panes} />
);

export default TabExample;

import React, { memo } from 'react';
import { Tab } from 'semantic-ui-react';

const MemoizedTabPane = memo(Tab.Pane);

const panes = [
  {
    menuItem: 'Tab 1',
    render: () => <MemoizedTabPane>Content of Tab 1</MemoizedTabPane>
  },
  // 其他标签页...
];

import styled from 'styled-components';
import { Tab } from 'semantic-ui-react';

const StyledTabPane = styled(Tab.Pane)`
  padding: 20px;
  background-color: #f9f9f9;
`;

const panes = [
  {
    menuItem: 'Tab 1',
    render: () => <StyledTabPane>Content of Tab 1</StyledTabPane>
  },
  // 其他标签页...
];