Question

当我运行此操作时，我收到错误消息：Element type is invalid: expected a string (built in components) or a class/function but got undefined, check the render method for LOGIN.

我只想在其他JS文件的主屏幕上显示登录

这是LOGIN.JS＆lt; ---我在索引中调用的地方

'use strict';
import React, { Component, Image} from 'react';
import {View, Text, StyleSheet} from 'react-native';

var Login = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
            <Image style={styles.logo}
            source={require('image!lock')} />
            <Text>HI</Text>
            </View>
        );
    }
});

INDEX.IOS.JS＆lt; - 我在呼叫登录页面

的地方

import React, { Component, Image } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var Login = require('./Login');

export default class AwesomeProject extends Component {
  render() {
    return (

      <View style={styles.container} >
       <Text style={styles.welcome}>
          Welcome!
        </Text>
        <Text style={styles.logins}>
        </Text> 

      <Login />
      </View>
    );        
  }
}

Answer 1

React渲染函数应返回要渲染的View元素。改变这个

var Login = React.createClass({ render: function() { return ( HI ); } });

到

 var Login = React.createClass({ 

          render: function() {
            return (  
              <View style={{flex:1}}>
                  <Text>HI</Text>
              </View>
              ); 
          } 

   });

Answer 2

您可以将Login.js文件的相同语法用作index.ios.js，并使用ES6 Class语法声明它，然后将其导出。

另外，仅供参考，您似乎从两个文件中的React而不是React Native导入zone.js:388Unhandled Promise rejection: Template parse errors: 'px-inbox' is not a known element: 1. If 'px-inbox' is an Angular component, then verify that it is part of this module. 2. If 'px-inbox' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" </h1> <link rel="import" href="./assets/px-spinner/px-spinner.html" /> [ERROR ->]<px-inbox height="100vh" list-items='[{"id":"1","title":"GT Vibration","subtitle":"Block 2","severity"): AppComponent@4:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'px-inbox' is not a known element: 1. If 'px-inbox' is an Angular component, then verify that it is part of this module. 2. If 'px-inbox' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" </h1> <link rel="import" href="./assets/px-spinner/px-spinner.html" /> [ERROR ->]<px-inbox height="100vh" list-items='[{"id":"1","title":"GT Vibration","subtitle":"Block 2","severity"): AppComponent@4:0 at TemplateParser.parse (http://127.0.0.1:4200/main.bundle.js:13787:19) at RuntimeCompiler._compileTemplate (http://127.0.0.1:4200/main.bundle.js:32817:51) at http://127.0.0.1:4200/main.bundle.js:32737:62 at Set.forEach (native) at RuntimeCompiler._compileComponents (http://127.0.0.1:4200/main.bundle.js:32737:19) at createResult (http://127.0.0.1:4200/main.bundle.js:32633:19) at ZoneDelegate.invoke (http://127.0.0.1:4200/main.bundle.js:62681:26) at Zone.run (http://127.0.0.1:4200/main.bundle.js:62563:43) at http://127.0.0.1:4200/main.bundle.js:62951:57 at ZoneDelegate.invokeTask (http://127.0.0.1:4200/main.bundle.js:62714:35)。

Image

如何从不同的JS渲染类？错误：期待一个字符串

2 个答案: