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

Question

在我的 React 应用程序中，我正在使用 MUI 选项卡，并且我必须根据选项为 true/false 来显示/隐藏选项卡。

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

我需要了解一种更好的方法来实现我的目标，因为我正在做的事情似乎是错误的。

我的代码如下

我应该如何显示/隐藏选项卡的条件

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

Answer 1

选项卡本身可以接收文档value中所写的 prop 。

只需将它们设置为您需要的值，它应该独立于隐藏而工作：

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