es6：如何在導出後導入const？

Question

我對我缺乏知識表示歉意。我想在文件中導入一個const值。我在同一個目錄中有兩個文件Home.js和styles.js。

Home.js

import React from 'react'; 
import styles from './styles'; 

const Home = (props) => { 

    const HEADER_MAX_HEIGHT = 200; 

} 

export { HEADER_MAX_HEIGHT }; 
export default Home; 

而且在styles.js

import { StyleSheet } from 'react-native' 
import { HEADER_MAX_HEIGHT } from './Home'; 

export default StyleSheet.create({ 
    header: { 
     height: HEADER_MAX_HEIGHT 
    } 
}); 

，但我得到這個錯誤

找不到變量：HEADER_MAX_HEIGHT

如何在styles.js中訪問該變量？

Answer 1

嘗試：

Home.js

import React from 'react'; 
import styles from './styles'; 

export const HEADER_MAX_HEIGHT = 200; 

const Home = props => <h1>Home</h1>; 

export default Home; 

個

styles.js

import { StyleSheet } from 'react-native'; 
import { HEADER_MAX_HEIGHT } from './Home'; 

export default StyleSheet.create({ 
    header: { 
    height: HEADER_MAX_HEIGHT, 
    }, 
}); 

你HEADER_MAX_HEIGHT需求是Home.js文件中，但Home組件之外。你可以在這裏閱讀：Javascript Scope

Answer 2

這只是函數範圍規則！

// Outer scope 
const Home = (props) => { 
    // Inner scope 
    const HEADER_MAX_HEIGHT = 200; 

} 

console.log(HEADER_MAX_HEIGHT); // Uncaught ReferenceError: HEADER_MAX_HEIGHT is not defined 

您無權訪問外部範圍內的HEADER_MAX_HEIGHT。所以當你試圖導出它時，它只是返回一個錯誤。

嘗試這樣的：

import React from 'react'; 
import styles from './styles'; 

const HEADER_MAX_HEIGHT = 200; 

const Home = (props) => {  
    // ... 
} 

export { HEADER_MAX_HEIGHT }; 
export default Home; 

現在styles.js：

import { HEADER_MAX_HEIGHT } from './Home'; 

Answer 3

你應該用完全不同的方式構造你的代碼。

一個很好的規則是將所有常量保存在一個單獨的文件中，遠離所有視圖。

嘗試爲所有App常量創建一個文件。 Constants.js是個不錯的選擇。

然後把常數是這樣的：

const Constants = { 
    HEADER_MAX_HEIGHT: 200, 
    OTHER_THINGS: 'whatever' 
} 
export default Constants 

那麼無論你需要的時候，你可以導入你的常量。

import Constants from '../Folder/Constants' 

，並使用像這樣的

const x = Constants.HEADER_MAX_HEIGHT