Question

当我export const到另一个js文件时，我遇到一个奇怪的问题。这是我的问题：

想象一下，我有两个名为index.js和router.js的文件。

// in router.js
export const stackNav = StackNavigator({
Home: {
    screen: Me,
    navigationOptions: {
        title: 'Welcome'
    }
}
});


// in index.js
import { stackNav } from './router';

class MainApp extends Component {
    render() {
        return (
            <stackNav />
       );
    }
}

export default MainApp;

当我使用上面的代码运行时，我无法运行我的应用程序并显示红屏错误消息：Expected a component class, got [object Object].

但是，如果我将所有stackNav更改为StackNav，我可以成功运行我的应用。所以，我不知道为什么名称/标识符的情况很重要？

Answer 1

因为React / ReactNative组件名称必须以大写字母开头

Answer 2

参考官方doc，

用户定义的组件必须大写

当元素类型以小写字母开头时，它引用内置组件（如或），并导致传递给React.createElement的字符串“div”或“span”。

以大写字母开头的类型，如编译为React.createElement（Foo），对应于在JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，在将它用于JSX之前将其分配给大写变量。

以下是文档中的代码段。

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

React Native JSX导出导入标识符

2 个答案: