[英]React Native JSX export import identifier
I encounter a strange issue when I export
a const
to another js file. 将
const
export
到另一个js文件时遇到一个奇怪的问题。 Here is my issue: 这是我的问题:
Imagine I have two files named index.js
and router.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;
When I use the above code to run, I fail to run my app and it shows error message with red screen: Expected a component class, got [object Object].
当我使用上述代码运行时,我无法运行我的应用程序,并且它以红色屏幕显示错误消息:
Expected a component class, got [object Object].
However, if I change all stackNav
to StackNav
, I can run my app successfully. 但是,如果将所有
stackNav
更改为StackNav
,则可以成功运行我的应用程序。 So, I don't know why the case of the name/identifier matters? 所以,我不知道为什么名称/标识符的大小写很重要?
因为React / ReactNative组件名称必须以大写字母开头
Referring to Offical doc , 参考官方文档 ,
User-Defined Components Must Be Capitalized
用户定义的组件必须大写
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement.
当元素类型以小写字母开头时,它指的是诸如或的内置组件,并导致将字符串'div'或'span'传递给React.createElement。
Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
以大写字母开头的类型,例如编译为React.createElement(Foo)并对应于在JavaScript文件中定义或导入的组件。
We recommend naming components with a capital letter.
我们建议使用大写字母命名组件。 If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
如果您确实有一个以小写字母开头的组件,请在JSX中使用它之前将其分配给大写的变量。
The following are the code snippet from the doc. 以下是文档中的代码段。
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" />;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.