web-dev-qa-db-fra.com

React.children.only s'attend à recevoir un seul élément de réaction enfant Navigator

J'ai essayé trop de sujet aide mais cela ne m'aide pas à corriger cette erreur, peut-être parce que je suis novice à réagir natif.

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>


 );
}

"React.children.only s'attend à recevoir un seul enfant d'élément de réaction" Je reçois cette erreur lorsque je l'exécute. s'il vous plaît, aidez ... Je suis conscient qu'il y a beaucoup d'autres sujets postés similaires mais aucun ne donne une solution appropriée à mon problème.

javascriptreactjsreact-nativereact-redux
7
acoas

Le composant react-redux <Provider /> s'attend à ce que son prop enfant soit un seul ReactElement, le composant racine de votre application. C’est probablement de là que vient cette erreur.

Props

  • store (Redux Store): Le seul magasin Redux dans votre application.
  • children (ReactElement) La racine de votre hiérarchie de 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

11
Corey Larson

Les réponses ci-dessus ne vous ont pas donné d'exemple de code, je vais ajouter du 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>
  );
}

Vous devez fondamentalement envelopper vos composants Nav et Tabs dans un composant racine pour le rendre dans le composant Fournisseur, comme indiqué dans d'autres réponses . J'espère que cela vous aidera!

3
mxdi9i7

Peut-être tard pour le post, mais vous pourriez envelopper React.Fragment dans votre navigateur et votre onglet pour contourner 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>


 );
}
2
StudentPlusOne

Le composant Provider de Redux s'attend à n'avoir qu'un seul enfant. Vous lui passez deux enfants, Navigator et Tabs. Enroulez tout dans le fournisseur dans un seul composant.

2
Andy Ray