es6：导出后如何导入常量？

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

您可能应该以完全不同的方式构建您的代码。

一个好的规则是将所有常量保存在一个单独的文件中，远离所有视图。

尝试为所有应用常量创建一个文件。 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

Answer 2

试试：

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 3

这只是函数作用域规则！

// 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';