【问题标题】:react native wont import another component反应原生不会导入另一个组件
【发布时间】:2020-05-12 16:18:05
【问题描述】:

我有一个非常简单的 react native 应用程序,目前只有两个屏幕,一个 app.js 和一个 login.js

当我设置这个应用程序时,我想在应用程序组件中显示登录组件。

这是 app.js 组件的外观。

import React from 'react';
import {  View } from 'react-native';
import Login from "login.js"

export default function App() {
  return (
    <View style={styles.container}>
      <Login > </Login>
      {/* <Text>This is a test</Text> */}
    </View>
  );
}

下面是 login.js 的样子

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

const users = [
  {
    name: "Sarthak",
    age: 29,
    address: "BG3",
  }
]


export default Login = () => {
  return (
    <View>
    <View>
  <Text>{users[0].name}</Text>
      <Input></Input>
    </View>
    <View>
      <Text>Password</Text>
      <Input></Input>
    </View>
</View>
  )
}

我得到的错误是这个 Invariant Violation: Element type is invalid: expected a string( for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in

我知道这是一个很常见的错误,但我无法找到解决方案。有人可以帮我吗?

【问题讨论】:

    标签: javascript reactjs react-native react-native-android


    【解决方案1】:

    导入语句错误

    您的进口

    import Login from "login.js

    正确方法

    如果它们在同一个文件夹中,请使用此

    import Login from "./login.js"

    如果它们在不同的文件夹中,请使用它,

    import Login from "./../_dirname/login.js"

    【讨论】:

    • 天啊,我删除了项目,因为它不起作用,我不知道为什么,但非常感谢。这完全是我的疏忽。
    【解决方案2】:

    解决这个问题:

    export default const Login = () => {
    

    【讨论】:

    • 我不认为常量可以默认导出。该应用程序是这样说的。抱歉,这不起作用。
    • 嗯,您要么使用错误的路径导入组件,要么使用我上面所说的内容。您也可以尝试默认导出函数而不是箭头函数,但如果您删除 export default 您的语句不是有效的 JavaScript,所以这是我的最佳猜测。
    • 就是这样。我正在使用智能感知导入,所以我认为它在导入时没有错误(我还是手动检查了)。我也在使用 react sn-ps 来生成组件。我正在处理何时使用命名导出与默认导出。即使我将 entore 组件放在同一页面中(因此,无需导入),它仍然给我同样的错误,我正处于拔出头发的边缘。我正在使用博览会,如果有帮助的话
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-06-05
    • 2018-09-02
    • 1970-01-01
    • 2023-04-01
    • 2021-03-05
    • 2018-03-19
    • 2021-10-05
    相关资源
    最近更新 更多