React.children.only 预期接收单个反应元素子导航器

Question

我尝试了太多主题帮助，但这并不能帮助我修复这个错误，也许是因为我是 react-native 的新手。

这是出错的代码。

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" 我在运行时收到此错误。请帮忙。我知道还有很多其他类似的主题，但 none 为我的问题提供了适当的解决方案。

Answer 1

redux 的 Provider 组件预计只有一个子组件。您将传递给它两个子项，Navigator 和 Tabs。将 Provider 中的所有内容包装在一个组件中。

Answer 2

react-redux <Provider /> 组件期望它的子属性是一个单独的 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
);

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

Answer 3

上面的答案没有给你代码示例，我会添加一些适用于你的情况的代码：

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 组件包装在 Root 组件中，以便在 Provider 组件中呈现它，如其他答案中所述。希望这对您有所帮助！

Answer 4

可能会迟到 post，但您可以将 React.Fragment 环绕在导航器和 Tab 周围以绕过该错误。 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>


 );
}

React.children.only 预期接收单个反应元素子导航器

React.children.only expected to receive a single react element child Navigator

javascript

reactjs

react-native

react-redux