39 votes

réagir natif - attendait une classe de composant, got [object Object]

Je me suis attendu à ce qu'une classe de composant reçoive une erreur d'objet lorsque j'essaie d'utiliser le composant loginPage que j'ai créé.

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

et voici le 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>
        );
    }
}
 

96voto

fandro Points 2752

Vous devez renommer loginPage classe LoginPage , la classe doit être capitalise

4voto

ayoub laaziz Points 530

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

0voto

Chandan Gr Points 9

supprimer les tags en 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);
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X