De réagir.les enfants.uniquement prévu pour recevoir un seul réagir élément enfant Navigator

J'ai essayé trop de rubrique d'aide, mais qui ne m'aide pas pour corriger cette erreur, peut-être parce que je suis newbie de réagir indigènes.

voici le code qui donne une erreur.

render() {
  return (

  <Provider store={store}>

    <Navigator
      initialRoute={{ name: 'Wake' }}
      configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
      renderScene={RouteMapper}
    />

    <Tabs />



  </Provider>


 );
}

"Réagir.les enfants.uniquement prévu pour recevoir un seul réagir élément de l'enfant", j'obtiens cette erreur quand je le lance. s'il vous plaît aider.
iam conscient qu'il y a beaucoup d'autres sujets posté similaire, mais aucun ne donne une bonne solution à mon problème.

OriginalL'auteur acoas | 2017-04-08

  1. 11

    L'réagissent-redux <Provider /> composant s'attend son enfant prop être un seul ReactElement, le composant racine de votre application. C'est probablement là où cette erreur vient de.

    Accessoires

    • store (Redux Magasin): Le seul Redux stocker dans votre application.
    • enfants (ReactElement) La racine de votre hiérarchie des composants.

    Exemple

    ReactDOM.render(
  <Provider store={store}>
    <div>
        <MyRootComponent/>
        <OtherComponent1/>
        <OtherComponent2/>
        //{...} as longer you let the component inside one global component 
        //- here the divs - React considers you have only one child. That it. 
    </div>
  </Provider>,
  rootEl
);

    Source: https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

    pourriez-vous me donner des exemple avec mon code? je ne comprends pas que
    Essayez de créer un nouveau composant qui enveloppe votre Navigateur Onglets et des composants. Ensuite nid à l'intérieur de Fournisseur.
    Désolé iam un débutant, pouvez-vous svp me donner l'exemple?

    OriginalL'auteur Corey Larson

  2. 3

    Les réponses ci-dessus n'a pas vous donner un exemple de code, je vais ajouter un peu de code qui s'applique à votre situation:

    const Root = () => {
  return (
   <div>
    <Navigator
      initialRoute={{ name: 'Wake' }}
      configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
      renderScene={RouteMapper}
    />

    <Tabs />
   </div>
 )   
}


render() {
  return (
    <Provider store={store}>
      <Root />
    </Provider>
  );
}

    En gros, vous avez besoin d'envelopper votre Nav et les Onglets des composants à l'intérieur d'un composant Racine à rendre à l'intérieur du composant Fournisseur, comme dit dans d'autres réponses.
    Espérons que cette aide!

    Adjacent JSX éléments doit être enveloppé dans une balise englobante
    ne sais pas comment j'ai manqué, édité
    Oui en passant Racine en tant que fonction de l'élément dans le Fournisseur, cela fonctionne pour moi. Merci

    OriginalL'auteur mxdi9i7

  3. 2

    Le composant Fournisseur de redux s'attend à avoir un seul enfant. Vous êtes de passage de deux enfants, et un Navigateur Onglets. Tout envelopper à l'intérieur de Fournisseur dans un seul composant.

    Exemple? Et bien j'ai essayé comme ceci {<Navigator ...... />, <Onglets />} Mais seulement le <Onglets> sont présents dans l'application.

    OriginalL'auteur Andy Ray

  4. 2

    Risquez d'être en retard pour le post, mais vous pouvez envelopper React.Fragment autour de votre navigation et Onglet pour obtenir autour de cette erreur. https://reactjs.org/docs/fragments.html

    render() {
  return (

  <Provider store={store}>
    <React.Fragment>
       <Navigator
         initialRoute={{ name: 'Wake' }}
         configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
         renderScene={RouteMapper}
       />

       <Tabs />
    </React.Fragment>


  </Provider>


 );
}
    Nice! Également transférables à Réagir Natif.

    OriginalL'auteur StudentPlusOne