Soy relativamente nuevo en React y me pregunto cuál es el estándar aquí.
Imagina que tengo un enrutador de reacción como este:
<Router history={history}> <Route path="/" component={App}> <Route path="home component={Home} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox} /> <Route path="contacts" component={Contacts} /> </Route> </Router> Y ahora quiero eliminar dos rutas si prop.mail está establecido en false , por lo que una forma sensata de hacerlo sería así:
<Router history={history}> <Route path="/" component={App}> <Route path="home component={Home} /> <Route path="about" component={About} /> { if.this.props.mail ? <Route path="inbox" component={Inbox} /> <Route path="contacts" component={Contacts} /> : null } </Route> </Router>Pero hay 2 rutas y React devuelve un error:
las expresiones deben tener un elemento principal.
No quiero usar múltiples ifs aquí. ¿Cuál es la forma preferida de React de manejar esto?
Póngalos en una matriz (asigne las teclas también):
{ if.this.props.mail ? [ <Route key={0} path="inbox" component={Inbox} />, <Route key={1} path="contacts" component={Contacts} /> ] : null } Con la última versión de React, también puedes probar React.Fragment , así:
{ if.this.props.mail ? <React.Fragment> <Route path="inbox" component={Inbox} />, <Route path="contacts" component={Contacts} /> </React.Fragment> : null }Puede aprovechar los fragmentos de mano abreviada para devolver una lista de niños junto con el operador lógico '&&' para la representación condicional. ¡Bonito y limpio! 😄
{this.props.mail && <> <Route path="inbox" component={Inbox} />, <Route path="contacts" component={Contacts} /> </> }Debe haber usado una etiqueta de fragmento, por ejemplo (div, <>,...).
Compruebe esta breve solución:
{ if.this.props.mail ? <> <Route path="inbox" component={Inbox} /> <Route path="contacts" component={Contacts} /> </> : null }