React.children.only预期接收单个React元素子项导航员。

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 期望只接收一个 React 元素子节点"，当我运行它时出现了这个错误。请帮忙。

我知道有很多其他的帖子提到了类似的问题，但是没有一个给出了解决方案。

- acoas

Answer 1

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

- Corey Larson

---

你能举个我的代码的例子吗？我不理解。 - acoas

尝试创建一个新的组件，将您的Navigator和Tabs组件包装起来。然后将其嵌套在Provider内部。 - Corey Larson

抱歉，我是新手，请您能否给我一个例子？ - acoas

Answer 2

你可能已经晚了，但你可以在Navigator和Tab周围使用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>


 );
}

- Softmochi

---

不错！也可以转移到React Native。 - spedy

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

你需要在一个根组件中包装你的导航和选项卡组件，然后在提供者组件中渲染它，就像其他答案中所说的一样。希望这能帮到你！

- mxdi9i7

---

相邻的JSX元素必须包含在一个封闭标签中。 - Far_Eggs

是的，在Provider中将Root作为组件函数传递，这对我有效。谢谢。 - Anupam Maurya

Answer 4

Redux中的Provider组件只能有一个子元素。你传递了两个子元素，Navigator和Tabs。请将Provider内的所有内容都包裹在一个单独的组件中。

- Andy Ray

---

尝试过这样写：{<Navigator ...... />, <Tabs />}但是APP中只有<Tabs>出现了。 - acoas