Estoy haciendo un menú de desplazamiento suave. El menú es un componente y, por lo tanto, está en un archivo jsx separado.

Se ve a continuación:

 const SideTabs = (props) => { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); }; console.log(value) return ( <IconContainer> <Tabs orientation="vertical" //change value={value} onChange={handleChange} > <Tab icon={<SearchIcon />} label={value === 0 ? <Typography variant="subtitle3">Search</Typography>: ""}/> <Tab icon={<WorkIcon />} label={value === 1 ? <Typography variant="subtitle3">Role</Typography>: ""}/> <Tab icon={<AccountBoxIcon/>} label={value === 2 ? <Typography variant="subtitle3">People</Typography>: ""} /> <Tab icon={<ViewCompactIcon/>} label={value === 3 ? <Typography variant="subtitle3">Build</Typography> : ""} /> </Tabs> </IconContainer> ) };

Sin embargo, quiero que se desplace suavemente usando las identificaciones de esto.

 const JobPost = () => { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <PageDiv> <IconContainer> <SideTabs/> </IconContainer> <Navbar/> <InitialSearch_INPUT id="search"/> <Tstdiv id="role"> hello </Tstdiv> <Tstdiv2 id="people"> Hi </Tstdiv2> <Tstdiv3 id="build"> Hell1 </Tstdiv3> </PageDiv> ); };

Luego lo vincularé internamente desde el archivo original usando el desplazamiento de reacción, similar a esto:

 <Link to="role" spy={true} smooth={true} offset={-40} duration={500}> <Tab icon={<WorkIcon />} label={value === 0 ? <Typography variant="subtitle3">Role</Typography>: ""}/> </Link>

la razón por la que no puedo hacer lo anterior solo es porque necesito establecer el valor usando React state AND scroll.

No estoy seguro de cómo hacer esto, pero creo que requiere accesorios.

¡Algunas ideas!

Saludos