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