Question

我尝试了太多的主题帮助，但这并没有帮助我解决这个错误，也许因为我是新手反应原生。

这是给出错误的代码。

render() {
  return (

  <Provider store={store}>

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

    <Tabs />



  </Provider>


 );
}

＆＃34; React.children.only预计将收到一个反应元素儿童＆＃34;我运行时遇到此错误。请帮忙。我知道有很多其他主题发布相似，但没有一个给我一个正确的解决方案。

Answer 1

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.

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

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

Answer 2

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

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

您需要在Root组件中包装Nav和Tabs组件，以便在Provider组件中呈现它，如其他答案中所述。希望这有帮助！

Answer 3

redux的Provider组件期望只有一个子组件。你传递了两个孩子，Navigator和Tabs。将提供程序中的所有内容包装在单个组件中。

Answer 4

发布时间可能较晚，但是您可以将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元素子Navigator

4 个答案: