Estoy usando la pestaña de la interfaz de usuario del material, cuál es mi tarea. Necesito mostrar la pestaña solo cuando el permiso es verdadero. He terminado esa parte, pero ¿y si el permiso es falso? No funcionará. ocultar pestaña...
const permission = { corp_permission: false, user_permission: true }; export default function LabTabs() { const classes = useStyles(); const [value, setValue] = React.useState("1"); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <div className={classes.root}> <TabContext value={value}> <TabList onChange={handleChange} aria-label="simple tabs example"> <Tab label="Item One" value="1" /> {permission.corp_permission == true && ( <Tab label="Item Two" value="2" /> )} <Tab label="Item Three" value="3" /> {permission.user_permission == true && ( <Tab label="Item Four" value="4" /> )} </TabList> <TabPanel value="1">Item One</TabPanel> <TabPanel value="2">Item Two</TabPanel> <TabPanel value="3">Item Three</TabPanel> <TabPanel value="4">Item four</TabPanel> </TabContext> </div> ); }En caso de que no te hayas dado cuenta ya, aquí:
https://codesandbox.io/s/material-demo-forked-cubew?file=/demo.js
Nota: el código MUI v4 es un desastre en algunos lugares, por lo que definitivamente recomiendo actualizar a v5.