web-dev-qa-db-fra.com

React - les expressions doivent avoir un élément parent?

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? 

reactjsreact-router
13
Wordpressor

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 }
16
Mayank Shukla

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>
    );
  }
}
0
Jens Gerntholtz