React native：未定义组件？无法导入？

Question

好的，在这里对本地反应非常陌生，我正在尝试非常简单地导入另一个 .js 文件，并在 index.ios.js[= 的主要 render() 函数中将其设置为运行 15=]

我到处都看过并尝试 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);

还有我的另一个 class:

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

this.test() 不是 TestClass 中 <View> 的有效 child 因为它不是有效的 React 组件，它也不是 return .

如果您想 "test" 您的 TestClass.render() 函数是运行，请将 console.log() 放在 return 语句上方，如下所示：

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

当然，您实际上看不到任何东西，因为TestClass没有任何children。

Answer 2

啊哈。我很清楚那是什么。将你的 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")
  }
}

您在导入语句中遗漏了 {Component}。我也接受了您的 module.exports 声明，这是不必要的。

React native：未定义组件？无法导入？

React native: Component not defined? Can't import?

javascript

reactjs

react-native

react-native-ios