Estoy usando una biblioteca llamada SlidingPane, y cada panel tiene exactamente los mismos estilos, solo contenido diferente según la página. Así que quiero ponerlo en una página separada y obtener el contenido a través de un argumento:
export default function CustomSlidingPane(content){ <SlidingPane className="slidingPanel" isOpen={state.isPaneOpen} onRequestClose={() => { setState({ isPaneOpen: false }); }} > <Container> {content} </Container> </SlidingPane> } Todo el contenido está en páginas .js separadas que se ven así:
export default function One() { return ( <h1>Hello</h1> ); }Entonces, lo que estoy tratando de hacer es pasar una de las funciones de contenido a CustomSlidingPane de esta manera:
import One from './One'; import CustomSlidingPane from './CustomSlidingPane'; export default function Main(){ <Container> <CustomSlidingPane content={<One/>}> </Container> }Todo lo que he intentado siempre termina en un contenido indefinido. ¿Hay alguna forma adecuada de hacer esto/es esto posible?
Unas pocas cosas:
return en CustomSlidingPanecontent de los accesorios.Prueba esto
export default function CustomSlidingPane({content}){ return ( <SlidingPane className="slidingPanel" isOpen={state.isPaneOpen} onRequestClose={() => { setState({ isPaneOpen: false }); }} > <Container> {content} </Container> </SlidingPane> ) } Además, este patrón podría complementarse mejor con el accesorio para children .
Necesitará usar accesorios para niños aquí. Estoy agregando un ejemplo con un elemento div simple.
export default function CustomSlidingPane(props) { return <div>{props.children}</div>; }El contenido será el mismo que definiste en tu ejemplo:
export default function One() { return <h1>Hello</h1>; }Así es como puede pasar el contenido a su componente slidePlane:
export default function Main() { return ( <div> <CustomSlidingPane> <One /> </CustomSlidingPane> </div> ); }