Javascript React.children.only 期望接收单个反应元素子导航器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43300897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.children.only expected to receive a single react element child Navigator
提问by acoas
I tried too many topic helps but that doesn't help me to fix this error, maybe cuz i'm newbie to react-native.
我尝试了太多主题帮助，但这并不能帮助我解决此错误，也许是因为我是 react-native 的新手。
here is the code which gives error.
这是给出错误的代码。
render() {
return (
<Provider store={store}>
<Navigator
initialRoute={{ name: 'Wake' }}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
renderScene={RouteMapper}
/>
<Tabs />
</Provider>
);
}
"React.children.only expected to receive a single react element child" i get this error when i run it. please help. iam aware that there are lot of other topics posted similar but none gives a proper solution to my problem.
“React.children.only 期望收到一个单一的反应元素孩子”我在运行它时收到此错误。请帮忙。我知道还有很多其他类似的主题发布，但没有一个为我的问题提供适当的解决方案。
回答by Corey Larson
The react-redux <Provider />component expects its child prop to be a single ReactElement, the root component of your application. That is probably where this error is coming from.
react-redux<Provider />组件期望其子 prop 是单个 ReactElement，即应用程序的根组件。这可能是这个错误的来源。
Props
- store (Redux Store): The single Redux store in your application.
- children (ReactElement) The root of your component hierarchy.
Example
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 );
道具
- 存储（Redux Store）：应用程序中的单个 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 );
Source: https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store
来源：https: //github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store
回答by mxdi9i7
The above answers did not give you a code example, I will add some code that applies to your 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>
);
}
You basically need to wrap up your Nav and Tabs components inside a Root component to render it within the Provider component, as said in other answers. Hope this helps!
如其他答案所述，您基本上需要将 Nav 和 Tabs 组件包装在 Root 组件中以在 Provider 组件中呈现它。希望这可以帮助！
回答by Softmochi
Might be late to the post, but you could wrap React.Fragmentaround your Navigator and Tab to get around that error. https://reactjs.org/docs/fragments.html
可能会迟到，但您可以环绕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>
);
}
回答by Andy Ray
The Provider component from redux expects to have only one child. You're passing it two children, Navigator and Tabs. Wrap everything inside Provider in a single component.
redux 中的 Provider 组件预计只有一个子组件。你传递给它两个孩子，Navigator 和 Tabs。将 Provider 中的所有内容都包装在一个组件中。
