【问题标题】:react native - expected a component class, got [object Object]react native - 期望一个组件类,得到 [object Object]
【发布时间】:2016-10-28 13:40:38
【问题描述】:

当我尝试使用我创建的 loginPage 组件时,我预计组件类会出现对象错误。

这里是 index.ios.js

import React, {Component} from 'react';

import {
    AppRegistry,
    View
} from 'react-native';

import loginPage from './pages/loginPage'

class app extends Component {
    render() {
        return (
            <View>
                <loginPage/>
            </View>
        );
    }
}

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

这里是 loginPage.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class loginPage extends Component {
    render() {
        return (
            <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}

【问题讨论】:

  • 类必须大写,更改它并让我知道更新。

标签: javascript reactjs react-native


【解决方案1】:

您需要将loginPage 类重命名为LoginPage,该类必须大写

【讨论】:

  • 惊人的答案!
  • 太棒了!谢谢,但是为什么会这样呢?
  • @BenBieler 这是答案:stackoverflow.com/questions/30373343/…
  • 那么它如何与使用 react-native init firstapp 创建的默认值一起工作?
【解决方案2】:

loginPage.js

import React from 'react';
import {
    Text,
    View
} from 'react-native';

const LoginPage = () => {
    return (
        <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
    );
}
export default LoginPage;

index.ios.js

import React, {Component} from 'react';

import {
    AppRegistry,
    View
} from 'react-native';

import LoginPage from './pages/loginPage'

class app extends Component {
    render() {
        return (
            <View>
                <LoginPage/>
            </View>
        );
    }
}

【讨论】:

    【解决方案3】:

    移除index.ios.js中的标签

    import React, {Component} from 'react';
    
    import {
        AppRegistry,
        View
    } from 'react-native';
    
    import loginPage from './pages/loginPage'
    
    class app extends Component {
        render() {
            return (
    
                    <loginPage/>
    
            );
        }
    }
    
    AppRegistry.registerComponent('app', () => app);
    

    【讨论】:

    • 好吧,我不知何故无法编辑它,因为编辑少于 6 个字符(感谢 SO),但您引用的 &lt;View&gt;&lt;/View&gt; 标记未呈现。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-11
    • 2018-03-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-03
    相关资源
    最近更新 更多