反应本机 + redux - 期望一个组件类，得到 [对象对象]

Question

我正在开始构建反应原生应用程序(使用 redux(。我正在遵循来自不同博客的示例，并能够将一个简单的应用程序与登录页面放在一起以开始使用。但是我得到，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/app/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/containers/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/app/containers/Login/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/app/containers/Login/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中，return 语句是错误的;你不能以这种方式混合 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>
);