私はあまりにも多くのトピックのヘルプを試しましたが、それはこのエラーを修正するのに役立ちません、多分私は反応ネイティブの初心者だからです。
ここにエラーを与えるコードがあります。
render() {
return (
<Provider store={store}>
<Navigator
initialRoute={{ name: 'Wake' }}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
renderScene={RouteMapper}
/>
<Tabs />
</Provider>
);
}
「React.children.onlyは、単一のリアクション要素の子を受け取ることが期待されています」それを実行すると、このエラーが発生します。助けてください。 Iamは、他にも多くのトピックが投稿されていることを知っていますが、私の問題を適切に解決できるものはありません。
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
上記の回答ではコード例は提供されませんでした。状況に適用するコードを追加します。
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コンポーネントをルートコンポーネント内にラップして、プロバイダーコンポーネント内にレンダリングする必要があります。お役に立てれば!
投稿に遅れる場合がありますが、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>
);
}
ReduxのProviderコンポーネントは、子が1つだけであると想定しています。 NavigatorとTabsという2つの子を渡します。プロバイダー内のすべてを単一のコンポーネントにラップします。