从路由器 nextjs 设置活动的 tabpanel mui答案

【问题标题】：Set active tabpanel mui from router nextjs从路由器 nextjs 设置活动的 tabpanel mui
【发布时间】：2021-07-20 14:54:22
【问题描述】：

我正在尝试使用路由器 pid 设置活动选项卡

方法如下

function dashboard({ tabId }) {

    const classes = useStyles();

    const [value, setValue] = React.useState(""); 

    useEffect(() => {
        console.log(tabId)
        if (tabId) {
            setValue(tabId);
        }

    }, [])
 
.......
}

我的每个 TabPanel 都有一个自定义值，我试图作为路由器参数 (pid) 传递的相同

pid 是通过 getInitialProps 获取的

dashboard.getInitialProps = async ({ query }) => {
    if (!query.pid) {
        return { tabId: 0 }
    }
    return { tabId: query.pid }
}

所以问题是，选项卡设置为活动但选项卡的内容不显示...只有选项卡设置为活动...

选项卡/TabPanel

<Tabs value={value} 
                            onChange={handleChange} 
                            initialSelectedIndex={1}
                            variant="fullWidth" 
                            aria-label="simple tabs example"
                            TabIndicatorProps={{
                                style: {
                                    display:'none',
                                }
                            }}
                            >
                        <Tab label="ACCUEIL" value="accueil" classes={{ root: classes.rootTab, selected: classes.selectedTab }} {...a11yProps(0)} />
                        <Tab label="GÉRER SA GAMME" value="ma-gamme" classes={{ root: classes.rootTab, selected: classes.selectedTab }} {...a11yProps(1)} />
                     .........
                        </Tabs>
                    </AppBar >

                    <TabPanel value="accueil" index={0}>

                    

                    </TabPanel>




                    <TabPanel value="ma-gamme" index={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 && (
          <Container>
          <Box p={3}>
            {children}
          </Box>
          </Container>
        )}
      </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}`,
    };
  }

任何帮助将不胜感激:)

由 juliomalves 修复

我使用的是字符串值而不是 value={index}

【问题讨论】：

你能显示你实际使用Tab/TabPanel的代码吗？
Tabs/TabPanel 等帖子新增功能
您将 value 作为字符串和 index 作为数字传递给您的 TabPanels，value === index 永远不会是真的，因此永远不会显示其内容。
现在很清楚了，谢谢 :)

标签： javascript tabs material-ui next.js

【解决方案1】：

由 juliomalves 修复

我使用的是字符串值而不是 value={index}

【讨论】：