it-swarm.com.de

React.children.nur erwartet, dass ein untergeordnetes Navigatorelement für ein Reaktionselement erwartet wird

Ich habe zu viele Themenhilfen ausprobiert, aber das hilft mir nicht dabei, diesen Fehler zu beheben.

hier ist der Code, der Fehler gibt.

render() {
  return (

  <Provider store={store}>

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

    <Tabs />



  </Provider>


 );
}

"React.children.only hat erwartet, ein einzelnes Kind zu reagieren" Ich bekomme diese Fehlermeldung, wenn ich es ausführe. Bitte helfen Sie . Ich bin mir dessen bewusst, dass es viele andere Themen gibt, die ähnlich veröffentlicht wurden, aber keine gibt eine richtige Lösung für mein Problem.

7
acoas

Die React-redux-Komponente <Provider /> erwartet, dass ihre untergeordnete Eigenschaft ein einzelnes ReactElement ist, die Stammkomponente Ihrer Anwendung. Das ist wahrscheinlich, woher dieser Fehler kommt.

Requisiten

  • store (Redux Store): Der einzelne Redux-Store in Ihrer Anwendung.
  • children (ReactElement) Die Wurzel Ihrer Komponentenhierarchie.

Beispiel

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
);

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

11
Corey Larson

Die obigen Antworten haben Ihnen kein Codebeispiel gegeben, ich werde etwas Code hinzufügen, der auf Ihre Situation zutrifft:

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>
  );
}

Sie müssen Ihre Nav- und Tabs-Komponenten grundsätzlich in eine Root-Komponente einschließen, um sie in der Provider-Komponente zu rendern, wie in den anderen Antworten erwähnt.

3
mxdi9i7

Möglicherweise ist der Post zu spät, aber Sie könnten React.Fragment um Ihren Navigator und den Tab herum einwickeln, um diesen Fehler zu umgehen. 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

Die Provider-Komponente von redux erwartet nur ein Kind. Sie übergeben zwei Kinder, Navigator und Registerkarten. Packen Sie alles in Provider in eine einzige Komponente.

2
Andy Ray