Question

所以，我正在学习本地反应的基础知识，遵循文档，我正在编写两个组件。

我在项目中使用greetings.js文件创建了一个components文件夹，在这个文件中我必须遵循以下代码：

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

class Greeting extends Component {
    render() {
        return (
            <Text>
                Hello {this.props.name}!
            </Text>
        );
    }
}

export default class LotsOfGreetings extends Component {
    render() {
        return (
            <View style={{ alignItems: 'center' }}>
                <Greeting name="Rexar"/>
                <Greeting name="Jaina"/>
                <Greeting name="Valeera"/>
            </View>
        );
    }
}

这是我的App.js：

    import React from 'react';
import { StyleSheet, Text, Image } from 'react-native';
import { Greetings, LotsOfGreetings } from './components/greetings';

export default class App extends React.Component {
  render() {

    return (
      <LotsOfGreetings></LotsOfGreetings>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我正在制作这个错误：

不变违规：元素类型无效：预期字符串（对于内置组件）...

我做错了什么？

Answer 1

您的导出不正确，请将其更改为

export class Greeting extends Component

和

export class LotsOfGreetings extends Component

Answer 2

在App.js中更改

这

import { Greetings, LotsOfGreetings } from './components/greetings';

要：

import LotsOfGreetings from './components/greetings';

这是默认加载的正确方法。

您可以查看更多详细信息here

不变违规 - reactjs - 本机的基本示例

2 个答案: