Tengo un componente de encabezado que se usa en otros 2 componentes que los envuelven cada vez con el mismo código. ¿Hay alguna lógica que se pueda implementar para envolverlos y usar ese código solo uno?
export default function SameCodeToWrapComponent1() { . . . return ( <ThemeProvider theme={appTheme}> <div className={classes.root}> <CssBaseline /> <AppBar > <Toolbar className={classes.toolbar}> ... </Toolbar> </AppBar> <main className={classes.content}> <div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}> <MyComponent1 /> </Paper> </Grid> </Grid> </Container> </main> </div> </ThemeProvider> ); }Y en otro componente que uso
export default function SameCodeToWrapComponent2() { . . . return ( <ThemeProvider theme={appTheme}> <div className={classes.root}> <CssBaseline /> <AppBar > <Toolbar className={classes.toolbar}> ... </Toolbar> </AppBar> <main className={classes.content}> <div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}> <MyComponent2/> </Paper> </Grid> </Grid> </Container> </main> </div> </ThemeProvider> ); }Como puede ver, ambos llaman MyComponent1 y MyComponent2 en un punto determinado, pero son la misma parte del código en 2 componentes diferentes
sí, debe crear un componente Wrapper y usar su accesorio secundario para representar el contenido dentro de él. esto se llama composición de componentes y hay un artículo famoso en el sitio web de reacción al respecto aquí . su componente contenedor se vería así:
const Wrapper = ({ children }) => { return ( <ThemeProvider theme={appTheme}> <div className={classes.root}> <CssBaseline /> <AppBar> <Toolbar className={classes.toolbar}>...</Toolbar> </AppBar> <main className={classes.content}> <div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}> {children} </Paper> </Grid> </Grid> </Container> </main> </div> </ThemeProvider> ); };entonces lo usarías así:
const AnyComponent = () => { return <Wrapper>Your non-reusable content goes here</Wrapper> }prueba esto:
export default function SameCodeToWrapComponent1({ customComponent }) { . . . return ( <ThemeProvider theme={appTheme}> <div className={classes.root}> <CssBaseline /> <AppBar > <Toolbar className={classes.toolbar}> ... </Toolbar> </AppBar> <main className={classes.content}> <div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}> {customComponent} </Paper> </Grid> </Grid> </Container> </main> </div> </ThemeProvider> ); } Pasa esta propiedad customComponent y de esa manera puede agregar un componente personalizado (el nombre de la propiedad puede cambiar)
Luego llama a su componente y pasa los elementos secundarios que desea agregar.
De este modo:
<SameCodeToWrapComponent1 customComponent={<MyComponent />} />