获取 React.Children.only 预计会收到单个 React 元素子错误答案

【问题标题】：Getting React.Children.only expected to receive a single React element child error获取 React.Children.only 预计会收到单个 React 元素子错误
【发布时间】：2017-03-06 14:55:32
【问题描述】：

我正在寻找一个好的样板，偶然发现了这个：

https://github.com/FormidableLabs/formidable-react-native-app-boilerplate

我注意到它已经过时，所以我正在尝试修复它并使其保持最新（如果有更好的最新版本也可以回答我的问题）

无论如何，我在标题中遇到了错误，在控制台中它是这样说的：

Warning: Failed prop type: Invalid prop `children`type `function` supplied to `Provider`, expected a single ReactElement.
in Provider (created by Root)
in Root
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

这是我的根：

/* @flow */

import React, {Component} from "react";
import { Provider } from "react-redux";
import configureStore from "../store/configure-store";
import Scene from "../components/scene";

const store = configureStore();

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        {() => <Scene />}
      </Provider>
    );
  }
}

export default Root;

可能是什么问题？我检查了具有 2 个元素的 TouchableHighlights，但在任何地方都找不到。

更新：

场景组件：

/* @flow */
/*eslint-disable prefer-const */

import React from "react";
import App from "../containers/app";
import NavigationBar from "./navigation-bar";

let {
  Navigator,
  View
} = React;

class Scene extends React.Component {
  renderScene(route: Object, navigator: Object) {
    const Component = route.component;
    return (
      <View style={{flex: 1}}>
        <NavigationBar
          backgroundStyle={{backgroundColor: "#eee"}}
          navigator={navigator}
          route={route}
          title={route.title}
          titleColor="#333"
        />
        <Component
          navigator={navigator}
          route={route}
          {...route.passProps}
        />
      </View>
    );
  }
  render() {
    return (
      <Navigator
        style={{flex: 1}}
        renderScene={this.renderScene}
        initialRoute={{
          component: App,
          title: "Starter App"
        }}
      />
    );
  }
}

export default Scene;

【问题讨论】：

你能提供你的里面的内容吗
这样做的原因是什么？ {() => <Scene />}，你可以只拥有<Scene />，它会返回组件。我还会仔细检查 Scene 组件内部的内容。注意那些导入，如果我们能看到 Scene 组件的样子，我想我们可以给你一个更好的答案。
我用场景组件更新了我的问题。我之所以这样是因为我只是以这种方式下载了存储库。

标签： react-native

【解决方案1】：

为什么要传递函数{() => <Scene />}？你不应该只是传递<Scene /> 组件吗？

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
         <Scene />
      </Provider>
    );
  }
}

【讨论】：

【解决方案2】：

这不是一个直接的解决方案，但我通过使用这个 repo 解决了它：

https://github.com/alinz/example-react-native-redux

【讨论】：