React.Children.only期望收到一个React元素子元素

Question

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Login from './js/components/Login';
import userReducers from './js/reducers/user';

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

let store = createStore(combineReducers({userReducers}));

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default class Testextends Component {
  render() {
    return (
      <Provider store = {store}>
        <App />
      </Provider>
      // <View>
      //   <Text>jhdgf</Text>
      // </View>
    );
  }
}

AppRegistry.registerComponent('Test', () => Test);

它给了我以下错误：

我正在尝试使用redux进行react-native的一个基本示例。如果我也删除了TouchableHighlight，则错误仍然存​​在。有什么想法吗？

Answer 1

在您粘贴的代码中，您似乎没有做错事，您确定错误来自代码的这一部分吗？

也许尝试在() TouchableHighlight组件之间放置，但我认为不会改变某些内容...

或尝试三元而不是二元操作。

另请确保从TouchableHighlight导入Text和react-native。

Answer 2

尝试删除所有不必要的空格

<View>{ !this.props.user.loggedIn &&
          <TouchableHighlight onPress={this.onLoginButtonPress}>
            <Text>Login</Text>
          </TouchableHighlight>
}</View>

因为在以下示例中

 <View> {...}</View> 

你有两个孩子：第一个是空格，第二个是弯曲的括号。

Answer 3

以下React Native代码存在同样的问题：

import {Link} from 'react-router-native'

<Link to={props.url}>{props.title}</Link>

花几个小时试图理解为什么类似的代码在WEB中工作但在本机视图中不工作。 React Native运行时没有可行的错误消息或提示，哪个组件导致此故障，因此很难确定问题。

通过执行以下操作来管理以解决此崩溃问题：

import {Link} from 'react-router-native'
import {Text} from "react-native";

<Link to={props.url}><Text>{props.title}</Text></Link>

看起来title文字被视为多个元素，因此我们最终遇到了这样的错误。

这不是该主题的解决方案。但是，因为在React Native中有很多方法可以解决这个错误，所以将这个崩溃的另一个例子放在谷歌搜索和结束的人身上可能是有用的。

Answer 4

首先，＆＃34;导出默认类Testextends Component＆＃34;实际应该是＆＃34;导出默认类测试扩展组件＆＃34;

抛出该错误的原因是Provider组件只占用一个元素。 例如： 错误：

<provider store = {store}>
 <App/>
<provider>

正确的：

{{1}}

如果你评论了该组件，那么你做得正确。尝试类错误，看看它是否有效。