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

es6：导出后如何导入const？

3 个答案: