React原生JSX導出導入標識

我遇到一個奇怪的問題，當我export a const到另一個js文件。這是我的問題：React原生JSX導出導入標識

想象一下，我有兩個文件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，我可以運行我的應用成功。所以，我不知道爲什麼名稱/標識符的情況很重要？

來源

2017-05-29 bufferoverflow76

這將會回答你的問題[https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters](https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters） –

@NeelGala您的評論對我的問題是正確的答案，我的問題與您提供的線索重複。 – bufferoverflow76

由於反應，和/ ReactNative組件名稱必須以大寫字母

來源

2017-05-29 08:33:45 Kawatare267

參照官方doc開始，

用戶定義組件必須大寫

當一個元素類型與開始小寫字母，它指的是像or這樣的內置組件，並且導致傳遞給React.createElement的字符串'div'或'span'。

以大寫字母開頭的類型，例如編譯爲React.createElement（Foo）並對應於在JavaScript文件中定義或導入的組件。

我們推薦用大寫字母命名組件。如果您確實有一個以小寫字母開頭的組件，請在將它用於JSX之前將其分配給大寫變量。

以下是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" />; 
}

來源

2017-07-10 03:33:14 bufferoverflow76

React原生JSX導出導入標識

回答

相關問題