首页 文章

反应原生redux - 期望一个组件类,得到[object Object]

提问于
浏览
1

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

先感谢您 .

1 回答

  • 3

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

相关问题