реакция native + redux - ожидается класс компонента, получил [object Object]

Question

Я начинаю с создания реагировать на собственные приложения (с сокращением). Я читал примеры из разных блогов и смог приступить к созданию простого приложения со страницей входа в систему. Однако я получаю ошибку expected a component class, got [object Object]. Был бы признателен, если кто-то может указать, что не так в моем коде.

DemoApp/index.ios.js

import React, { AppRegistry } from 'react-native'; 
import DemoApp from './app/'; 

AppRegistry.registerComponent('demoApp',() => DemoApp); 

DemoApp/приложение/index.js

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 
import App from './containers/App'; 
import rootReducer from './reducers/rootReducer'; 

const store = createStore(rootReducer); 

export default class DemoApp extends Component { 
    constructor(props) { 
    super(props); 
    }; 

    render() { 
    return (
     <Provider store = { store }> 
     <App /> 
     </Provider> 
    ); 
    }; 
}; 

DemoApp/приложение/контейнеры/App.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { 
    View, 
} from 'react-native'; 
import Login from '../containers/Login'; 

export class App extends Component { 
    componentWillMount() { 
    // this is the first point of control after launch 
    }; 

    render() { 
    if (this.props.signedIn) { 
     return <Login /> 
    } else { 
     return <Login /> 
    } 
    }; 
}; 

const mapStateToProps = (state) => { 
    return { 
    signedIn: false; 
    } 
} 

export default connect(mapStateToProps)(App); 

DemoApp/приложение/контейнеры/Войти/index.js

// Container for Login Component 
import React from 'react'; 
import { connect } from 'react-redux'; 
import Login from './Login'; 

const mapStateToProps = (state) => { 
    return { 
    isLoggedIn: false, 
    }; 
}; 

export default connect(mapStateToProps)(Login); 

DemoApp/приложение/контейнеры/Войти/Login.js

import React, { Component } from 'react'; 
import { 
    View, 
    Text 
} from 'react-native'; 
import styles from './styles'; 
import images from '../../config/images'; 

export default class Login extends Component { 
    constructor(props) { 
    super(props); 
    }; 

    render() { 
    return (
     <View style = { styles.container }> 
     if (this.props.isLoggedIn) { 
      <Text style = { styles.welcome }> 
      Welcome to Demo App! 
      </Text> 
     } else { 
      <img style = { styles.logoImage } src = { images.logo } alt = "Demo App Logo" /> 
     } 
     </View> 
    ); 
    }; 
}; 

Спасибо заранее.

Answer 1

В Login.js заявление о возвращении неверно; вы не можете смешивать JSX и Javascript таким образом. Javascript должен быть встроен в фигурные скобки.

Нечто подобное было бы лучше

const comp = this.props.isLoggedIn ? 
    <Text style = { styles.welcome }> 
     Welcome to Demo App! 
    </Text> 
    : 
    <img style = { styles.logoImage } src = { images.logo } alt = "Demo App Logo" /> 


return (
    <View style = { styles.container }> 
    {comp} 
    </View> 
);