Reagieren native: Komponente nicht definiert? Nicht importieren können?

Ok, sehr neue zu reagieren einheimische hier und Im Versuch, sehr einfach importieren eine andere .js-Datei, die ausgeführt werden, in der Haupt - render() func in index.ios.js

Ich habe überall gesucht und versucht, sowohl die import and require dies zu tun, aber ich komme nicht weiter mit dem Fehler:

Hier ist, was ich habe, ist der Fehler an den Kopf geworfen nur die Ergänzung der import-Zeile:

import React, { Component } from 'react';
import { Button, Card } from 'react-native-material-design';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
//import { Container, Content } from 'native-base';

import TestClass from "./TestClass";
//var animation = require('./TestClass');

//BODY
export default class SkysReact extends Component {


  render() {
    return (<View style={styles.container}>
    <TestClass/>
    </View>);

    //return (<View style={styles.container}>
    //{this.test()}
    //</View>);
  }
  test() {
  console.log("Hello World")
}

animate()
{
  console.log("animate");
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#404040',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SkysReact', () => SkysReact);

Und meine andere Klasse:

import React from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';

export default class TestClass extends Component { //not defined error here

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
}
module.exports = TestClass;

Wie kann ich die Anzeige in meiner Testklasse index.ios.js? Was ist falsch?

Sie brauchen nicht das Modul.Exporte an der Unterseite der Komponente. Sie sind bereits mit export Standard in der Klasse name. Anmerkung.

InformationsquelleAutor skyguy | 2017-07-13

9

Ah hah. Ich weiß genau, was es ist. Vergleichen Sie die Spitze Ihres TestClass-Datei mit mine unten. Sie werden den Unterschied sehen. Dieses Problem zu lösen, und fertig.
```
import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
export default class TestClass extends Component {

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
} 
```
Ihnen fehlten des, {Component} in deine import-Anweisung. Ich nahm auch unser Modul.exports-Anweisung, seine unnötige.
- In der Regel werden die Fehler, die Sie geben, sind Sie ziemlich gut. Komponente ist nicht definiert, weil man vergessen hat, Sie als Teil der import-Anweisung am Anfang Ihrer Testklasse Datei.
- component is not defined (Kleinbuchstaben C bedeutet, dass Sie extends component statt extends Component
- Das könnte passieren, auch. Der Hauptgrund war, wollte er Sie nicht, nutzen Sie das es6 destructuring an der Spitze seiner TestClass Komponente, wie er richtig in seinem anderen Komponente. importieren Reagieren, { Component } von 'reagieren' ist erforderlich, wenn Sie möchten, rufen Sie einfach "extends Component". Sonst würden Sie zu tun haben "erstreckt Reagieren.Komponente".
InformationsquelleAutor Dan Zuzevich
-1

this.test() ist kein Gültiger Kind Ihrer <View> im TestClass weil es keine gültige Reagieren Komponente, noch ist es eine Rückkehr.

Wenn Sie wollen, um zu "testen", dass Ihr TestClass.render() Funktion ausgeführt wird, legen Sie die console.log() oben Ihre return - Anweisung wie folgt:
```
render() {
  this.test();
  return (
    <View style={styles.container}></View>
  );
}
```
Natürlich, Sie nicht wirklich sehen nichts, weil TestClass hat keine Kinder.
- Nein, ich kopiere einfach eingefügt was ich hatte in index.ios.js weil ich wusste, dass die Rückkehr gearbeitet. Ich möchte die Anzeige TestClass machen, die eine Ansicht haben und andere container-Elemente
- Wie kann ich die Anzeige TestClass?
- Btw, das gilt Reagieren, dass er mit. Fügen Sie eine Methode wie die, die in Ihrem JSX Körper, und es wird-Konsole.Protokoll der Aussage.
- Ja, ich nehme an, du hast Recht, da this.test() wird nur zurück undefined.
InformationsquelleAutor jered

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.