React native：組件未定義？ 無法導入？

Question

好的，非常新的在這里做出反應原因我想嘗試非常簡單地導入另一個.js文件並讓它在index.ios.js中的主render()函數中運行

我到處尋找並嘗試import and require這樣做，但是我遇到了錯誤：

這就是我所擁有的，只是添加了導入行就會出現錯誤：

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

而我的另一課：

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;

我怎樣才能在index.ios.js中顯示TestClass？ 怎么了？

Answer 1

啊哈。 我確切地知道它是什么。 將TestClass文件的最頂行與我的下面進行比較。 你會看到差異。 解決這個問題，你完成了。

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")
  }
} 

您錯過了import語句中的{Component}。 我也拿了你的module.exports語句，這是不必要的。

Answer 2

this.test()不是TestClass <View>的有效子this.test() ，因為它不是有效的React組件，也不返回一個。

如果你想“測試”你的TestClass.render()函數正在運行，請將console.log()放在return語句之上，如下所示：

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

當然，你實際上看不到任何東西，因為TestClass沒有任何孩子。