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

Posted 2023-02-22

【中文标题】遍历选项卡列表并使用 if 语句显示不同的视图

【英文标题】：iterate through tabs list and show different view with if statement

【发布时间】：2021-04-16 19:29:39

【问题描述】：

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

(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'
                    
                    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;

【参考方案1】：

试试这样的

生成标签

<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>
    );
  )

【讨论】：

非常非常接近，由于某种原因它从索引 1 开始，而不是 0

标签也没有显示各自的名称，但非常接近@First Arachne