react native + redux - 期望一个组件类，得到[object Object]

Question

我开始构建 react 原生应用程序（使用 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>
);