遍历选项卡列表并使用 if 语句显示不同的视图

问题描述

嗨，目前我正在尝试迭代构建选项卡和选项卡面板以显示其信息，但我无法获得想要显示的内容。我有每个名称的名称列表，创建一个选项卡和一个选项卡面板

(Tabs e.g)(Tabs:TabA,TabB,TabC) 在每个标签下面应该是一个带有信息的面板 （面板例如（TabPanel：Data1，Data2，Data3）分别。

我知道如何创建选项卡，但我无法使用 if 语句获取我想要在面板中正确显示的数据。

就像我想说如果 Tabs === "TabA" 返回 Data1 相反，我一直在每个选项卡上获取 Data1。如果有人可以提供帮助，这是我的代码。

tabs.js

import React,{ useState,useEffect } from 'react';

// MUI
import {
  Grid,Paper,Tabs,Tab,} from '@material-ui/core';


import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

// styling MUI
import {
  makeStyles,} from '@material-ui/core/styles';

// api
import { retrieveForumTabsInfo } from 'api/ForumsAPI';

//page
import MissionRiskAssessment from "../views/msap" //future view to display on respective tab
import ATOCard from "../views/card"  //future view to display on respective tab
import ResponsibilitiesCard from "../views/card2"  //future view to display on respective tab
import MatLvlCard from "../views/card3"  //future view to display on respective tab

// styling
const useStyles = makeStyles((theme) => ({
  gridContainer: {
    paddingTop: "2rem",paddingLeft: "2rem",paddingRight: "2rem",},}));

function ForumTabs(props) {
  //styling
  const classes = useStyles();

  // state
  const [tabsInfo,setTabsInfo] = useState([]);
  const [currentTabIndex,setCurrentTabIndex] = useState(null);

  // handlers
  const handleTabChange = (event,tabIndexSelected) => {
    setCurrentTabIndex(tabIndexSelected);
  }

  // on Mount...
  useEffect( () => {
    // append Tableau .js script tag
    appendTableauJsScript();

    // gather tabs info
    let tabs_info = retrieveForumTabsInfo( props.forumObj.forum_name );
    console.log("loooooooooook Heeerrrrrreee")
    console.log("tabs_info " + tabs_info[0] )
    setTabsInfo(tabs_info);

    // not set current tab to 1
    setCurrentTabIndex( 1 );
  },[]);



  //TabPanel
  //*************************************** */
  function TabPanel(props) {
    const { children,value,index,...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,index: PropTypes.any.isrequired,value: PropTypes.any.isrequired,};
  
  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,'aria-controls': `simple-tabpanel-${index}`,};
  }
//********************************************************** */
 
  return(
    <Grid
      container
      spacing={2}
      justify="center"
      className={classes.gridContainer}
    >

      <Grid container item xs={10} alignItems="center">
        <Paper position="static">
          <Tabs
            value={currentTabIndex}
            onChange={handleTabChange}
            indicatorColor="primary"
          >
            {/* initial Header tab */}
            <Tab
              label={
                <div justify="center">
                  <img
                    src={process.env.PUBLIC_URL + '/img/prism-icon-inapp.png'}
                    alt="prismlogo"
                    height={32}
                  />
                  Risk By:
                </div>
              }

              disabled
            />

            {/* generate Tabs ---here is where the trouble starts i create the tabs and Now i want an if statement like if tabInfo==='A' return tabpanel that shows "cat" in tab "A" only not every tab */}

            {
              tabsInfo.map( (tmp_tab_info) => {
                return(
                  <Tab label={tmp_tab_info}/>

                );
              })
            }

          </Tabs>
          {/* added the tab panel */}
          {/* generate views per respective panel */}

          <TabPanel value={currentTabIndex} index={currentTabIndex}>
            what to place here??
          </TabPanel>

  
        </Paper>
      </Grid>
      
    </Grid>
  );
}

export default ForumTabs;

解决方法

尝试这样的事情

• 生成标签

<Tabs
  ...
/>
  ...
  {
    tabsInfo.map( (tmp_tab_info,index) => {
      return(
        <Tab label={tmp_tab_info.label} {...a11yProps(index)}/>
      );
    })
  }
</Tabs>

• 生成标签面板

{
  tabsInfo.map((tmp_tab_info,index) => {
    return (
      <TabPanel value={currentTabIndex} index={index}>
        {...tmp_tab_info}
      </TabPanel>
    );
  })
}