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

Posted 2023-02-22

【中文标题】React.children.only 期望接收单个反应元素子导航器

【英文标题】：React.children.only expected to receive a single react element child Navigator

【发布时间】：2017-09-04 04:23:03

【问题描述】：

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

这是给出错误的代码。

render() 
  return (

  <Provider store=store>

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

    <Tabs />



  </Provider>


 );

“React.children.only 预计会收到一个反应元素子”我在运行它时收到此错误。请帮忙。 我知道有很多其他类似的主题发布了，但没有一个可以为我的问题提供适当的解决方案。

【参考方案1】：

react-redux <Provider /> 组件期望其子 prop 是单个 ReactElement，即应用程序的根组件。这可能就是这个错误的来源。

道具

store（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

【讨论】：

你能给我举个例子吗？我不明白

尝试创建一个新组件来包装您的 Navigator 和 Tabs 组件。然后将其嵌套在 Provider 中。

对不起，我是新手，你能举个例子吗？

【参考方案2】：

可能会迟到，但您可以将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>


 );

【讨论】：

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

【参考方案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 组件中呈现它，如其他答案中所述。 希望这会有所帮助！

【讨论】：

相邻的 JSX 元素必须包含在封闭标签中

是的，将 Root 作为 Provider 中组件的功能传递，它对我有用。谢谢

【参考方案4】：

redux 的 Provider 组件期望只有一个孩子。你传递给它两个孩子，Navigator 和 Tabs。将 Provider 中的所有内容包装在一个组件中。

【讨论】：

例子？好吧，我试过这样 , 但只有 出现在应用程序中。