web-dev-qa-db-ja.com

React.children.onlyは、単一の反応要素の子ナビゲーターを受け取ることが期待されています

私はあまりにも多くのトピックのヘルプを試しましたが、それはこのエラーを修正するのに役立ちません、多分私は反応ネイティブの初心者だからです。

ここにエラーを与えるコードがあります。

render() {
  return (

  <Provider store={store}>

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

    <Tabs />



  </Provider>


 );
}

「React.children.onlyは、単一のリアクション要素の子を受け取ることが期待されています」それを実行すると、このエラーが発生します。助けてください。 Iamは、他にも多くのトピックが投稿されていることを知っていますが、私の問題を適切に解決できるものはありません。

javascriptreactjsreact-nativereact-redux
7
acoas

React-redux <Provider />コンポーネントは、その子プロップがアプリケーションのルートコンポーネントである単一のReactElementであることを期待しています。それがおそらくこのエラーの原因です。

小道具

  • ストア（Reduxストア）：アプリケーション内の単一のReduxストア。
  • children（ReactElement）コンポーネント階層のルート。

例

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

ソース： https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

12
Corey Larson

上記の回答ではコード例は提供されませんでした。状況に適用するコードを追加します。

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

他の回答で述べたように、基本的に、NavおよびTabsコンポーネントをルートコンポーネント内にラップして、プロバイダーコンポーネント内にレンダリングする必要があります。お役に立てれば！

3
mxdi9i7

投稿に遅れる場合がありますが、React.Fragmentナビゲーターとタブを囲んでエラーを回避します。 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
Softmochi

ReduxのProviderコンポーネントは、子が1つだけであると想定しています。 NavigatorとTabsという2つの子を渡します。プロバイダー内のすべてを単一のコンポーネントにラップします。

2
Andy Ray