Mi aplicación React tiene múltiples componentes funcionales que repiten la misma lógica condicional, que me gustaría extraer a su propio componente para evitar duplicarla en todos los componentes.
A continuación se muestra un ejemplo de una de las páginas que muestra el código repetitivo repetido. Si el window.userPermission global no contiene el valor Page1 , el usuario es redirigido a la página de inicio.
¿Hay alguna forma de modularizar esta lógica condicional, incluida la redirección, mientras se le pasa la cadena de permisos ( Page1 , etc.)?
import ... export default function SomeComponent() { // begin boilerplate code if ( window.userPermission != null && !window.userPermission.find(permission => permission.id == 'Page1') ) { return ( <div> <Redirect to="/" /> </div> ); } // end boilerplate code return ( <div> <Page1/> </div> ); }Realmente fácil, simplemente envuelva su página en un componente contenedor y, si un valor es verdadero, devuelva los elementos secundarios o redirija.
import {Redirect} from 'react-router-dom' const SomeComponent = ({children, page}) => { if ( window.userPermission != null && !window.userPermission.find(permission => permission.id == page) ) return children return <Redirect to="/" /> } export default SomeComponentLuego usa este componente así:
<SomeComponent page="page1"> <Page1/> </SomeComponent>