Javascript 如何根据条件显示/隐藏MUI选项卡并维护正确的选项卡索引

在我的React应用程序中，我使用的是MUI选项卡，如果选项为真/假，我必须使选项卡基于显示/隐藏

我的问题是，我可以隐藏选项卡，但当所有选项卡都显示时，选项卡索引会获得不同数量的内容。这导致当我单击一个选项卡时，我看到另一个选项卡的内容

我需要了解一种更好的方式来实现我的目标，因为我所做的似乎是错误的

我的代码如下

关于如何显示/隐藏选项卡的条件

  const isRecruitmentPortal = options.recruitmentPortal;
  const isEngagementPortal = options.engagementPortal;
  const isConsenteesPortal = options.consenteesPortal;

选项卡：

<div className={classes.root}>
      <AppBar className={classes.appBar} position="static" elevation={0}>
        <Toolbar disableGutters>
          <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)}>
            <Tab label="Study Info" />
            <Tab label="Study Tracks" />
            <Tab label="User Admin" />
            <Tab label="Study Locales" />
            {isEngagementPortal && <Tab label="Resources" />}
            {isRecruitmentPortal && <Tab label="Pre-screener" />}
            {isRecruitmentPortal && <Tab label="Consent" />}
            {isRecruitmentPortal && <Tab label="Manuscript" />}
            <Tab label="Survey" />
            {isRecruitmentPortal && <Tab label="Translations" />}
            <Tab label="Sites" />
            {isConsenteesPortal && <Tab label="eConsent" />}
            {isRecruitmentPortal && <Tab label="Reports" />}
          </Tabs>
        </Toolbar>
      </AppBar>
      {console.log(tab)}
      <Grid>
        {tab === 0 && (
          <StudyInfo
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 1 && <StudyTracks studyId={studyId} />}
        {tab === 2 && <div>USER ADMIN</div>}
        {tab === 3 && (
          <StudyLocales
            setAlert={setAlert}
            studyId={studyId}
            locales={locales}
            currentLocales={currentLocales}
            refetchQueries={refetchQueries}
          />
        )}
        {isEngagementPortal && tab === 4 && (
          <StudyResources studyId={studyId} locales={locales} />
        )}
        {tab === 5 && isRecruitmentPortal && (
          <Questionnaire
            type="PRESCREENER"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 6 && (
          <Questionnaire
            type="CONSENT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 7 && (
          <Questionnaire
            type="MANUSCRIPT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {tab === 8 && (
          <Questionnaire
            type="SURVEY"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 9 && (
          <StudyTranslation
            studyId={studyId}
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 10 && (
          <Sites
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            locales={locales}
          />
        )}
        {isConsenteesPortal && tab === 11 && <div>E-CONSENT</div>}
        {isRecruitmentPortal && tab === 12 && <Reports studyId={studyId} />}
      </Grid>
      <Alert content={alert} closeDialog={setAlert} />
    </div>
  );

setTab（新值）}>
{isEngagementPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isconsentesportal&&}
{isRecruitmentPortal&&}
{console.log（tab）}
{tab===0&&(
)}
{tab===1&&}
{tab==2&&USER ADMIN}
{tab===3&&(
)}
{isEngagementPortal&&tab==4&&(
)}
{tab==5&&isRecruitmentPortal&&(
)}
{isRecruitmentPortal&&tab==6&&(
)}
{isRecruitmentPortal&&tab==7&&(
)}
{tab===8&&(
)}
{isRecruitmentPortal&&tab==9&&(
)}
{tab===10&&(
)}
{isconsentesportal&&tab==11&&E-approve}
{isRecruitmentPortal&&tab==12&&}
);

选项卡本身可以接收中写入的

值

只需将它们设置为所需的值，它就可以独立于隐藏工作：

<div className={classes.root}>
      <AppBar className={classes.appBar} position="static" elevation={0}>
        <Toolbar disableGutters>
          <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)}>
            <Tab value={0} label="Study Info" />
            <Tab value={1} label="Study Tracks" />
            <Tab value={2} label="User Admin" />
            <Tab value={3} label="Study Locales" />
            {isEngagementPortal && <Tab value={4} label="Resources" />}
            {isRecruitmentPortal && <Tab value={5} label="Pre-screener" />}
            {isRecruitmentPortal && <Tab value={6} label="Consent" />}
            {isRecruitmentPortal && <Tab value={7} label="Manuscript" />}
            <Tab value={8} label="Survey" />
            {isRecruitmentPortal && <Tab value={9} label="Translations" />}
            <Tab value={10} label="Sites" />
            {isConsenteesPortal && <Tab value={11} label="eConsent" />}
            {isRecruitmentPortal && <Tab value= {12} label="Reports" />}
          </Tabs>
        </Toolbar>
      </AppBar>
      {console.log(tab)}
      <Grid>
        {tab === 0 && (
          <StudyInfo
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 1 && <StudyTracks studyId={studyId} />}
        {tab === 2 && <div>USER ADMIN</div>}
        {tab === 3 && (
          <StudyLocales
            setAlert={setAlert}
            studyId={studyId}
            locales={locales}
            currentLocales={currentLocales}
            refetchQueries={refetchQueries}
          />
        )}
        {isEngagementPortal && tab === 4 && (
          <StudyResources studyId={studyId} locales={locales} />
        )}
        {tab === 5 && isRecruitmentPortal && (
          <Questionnaire
            type="PRESCREENER"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 6 && (
          <Questionnaire
            type="CONSENT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 7 && (
          <Questionnaire
            type="MANUSCRIPT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {tab === 8 && (
          <Questionnaire
            type="SURVEY"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 9 && (
          <StudyTranslation
            studyId={studyId}
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 10 && (
          <Sites
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            locales={locales}
          />
        )}
        {isConsenteesPortal && tab === 11 && <div>E-CONSENT</div>}
        {isRecruitmentPortal && tab === 12 && <Reports studyId={studyId} />}
      </Grid>
      <Alert content={alert} closeDialog={setAlert} />
    </div>
  );



setTab（新值）}>
{isEngagementPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isRecruitmentPortal&&}
{isconsentesportal&&}
{isRecruitmentPortal&&}
{console.log（tab）}
{tab===0&&(
)}
{tab===1&&}
{tab==2&&USER ADMIN}
{tab===3&&(
)}
{isEngagementPortal&&tab==4&&(
)}
{tab==5&&isRecruitmentPortal&&(
)}
{isRecruitmentPortal&&tab==6&&(
)}
{isRecruitmentPortal&&tab==7&&(
)}
{tab===8&&(
)}
{isRecruitmentPortal&&tab==9&&(
)}
{tab===10&&(
)}
{isconsentesportal&&tab==11&&E-approve}
{isRecruitmentPortal&&tab==12&&}
);