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

时间:2017-02-08 16:16:11

标签: javascript reactjs react-native redux react-redux

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

提前谢谢。

1 个答案:

答案 0 :(得分:3)

extension UIViewController { func addBlurrEffect() { //layout for the pool of clnts that can be selected to add files let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark) let blurEffectVw = UIVisualEffectView(effect: blurEffect) blurEffectVw.frame = self.view.bounds blurEffectVw.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation self.view.addSubview(blurEffectVw) blurEffectView = blurEffectVw } } 中,return语句错误;你不能用这种方式混合JSX和Javascript。必须在大括号内嵌入Javascript。

这样的事情会更好

Login.js