Reaccionar código JS:
Quiero que src/app.jsx export default App cuando la variable REACT_APP_AUTH_SERVER en .env no exista o no tenga otro valor, y export default withAuthenticator(App) cuando la variable REACT_APP_AUTH_SERVER en .env exista y tenga valor aws-cognito :
src/app.jsx :
import React, { Component } from 'react'; import SecuredGate from './SecuredGate/SecuredGate'; import { withAuthenticator } from '@aws-amplify/ui-react' import './App.css'; import '../fontStyles.css'; class App extends Component { render() { return ( <div> <SecuredGate /> </div> ); } } const Result = () => { if (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito"){ return withAuthenticator(App); } return App; } // export default App; // export default withAuthenticator(App) export default Result;Sin embargo, esto no está funcionando.
Si lo hago:
export default App; // export default withAuthenticator(App), funciona, y si lo hago:
// export default App; export default withAuthenticator(App)funciona igual
Entonces, ¿qué me estoy perdiendo?
Creo que el problema es que el componente Result devuelve un componente en lugar de un elemento. Para comprender mejor esto, mire qué hace el componente de la App cuando se llama con <App /> . Ejecuta el código en su cuerpo y devuelve algo de marcado. Pero, ¿qué sucede si llama a <Result /> . Ejecutará el código en su bloque y devolverá otro componente (una función). Entonces, para resolver esto, puedes intentar:
const Result = (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito") ? withAuthenticator(App) : App; } export default Result;