Je suis relativement nouveau dans React et je me demande quelle est la norme ici.
Imaginez que j'ai un routeur de réaction comme celui-ci:
<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>
Et maintenant, je veux supprimer deux routes si prop.mail
est défini sur false
, donc une façon sensée de le faire serait la suivante:
<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>
Mais il y a 2 routes et React renvoie une erreur:
les expressions doivent avoir un élément parent.
Je ne veux pas utiliser plusieurs ifs ici. Quelle est la manière préférée de React de gérer cela?
Placez-les dans un tableau (assignez également les clés):
{ if.this.props.mail ?
[
<Route key={0} path="inbox" component={Inbox} />,
<Route key={1} path="contacts" component={Contacts} />
]
: null }
Avec la dernière version de React, vous pouvez aussi essayer React.Fragment
, comme ceci:
{ if.this.props.mail ?
<React.Fragment>
<Route path="inbox" component={Inbox} />,
<Route path="contacts" component={Contacts} />
</React.Fragment>
: null }
Face à la même erreur dans une situation similaire (React Native).
export default class App extends React.Component {
render() {
return (
<StatusBar barStyle="default" />
<AppContainer />
);
}
}
Comme indiqué dans l'invite d'erreur, l'expression JSX requiert un élément parent, par conséquent, enroulez les éléments dans l'expression de retour avec un élément parent. Le style flex: 1
a été ajouté pour permettre à l'élément <View>
d'assumer la hauteur de tout l'écran.
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar barStyle="default" />
<AppContainer />
</View>
);
}
}