web-dev-qa-db-ja.com

es6：エクスポート後にconstをインポートする方法

知識不足をおaびします。ファイル内にconst値をインポートしたい。同じディレクトリにHome.jsとstyles.jsの2つのファイルがあります。

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でその変数にアクセスするにはどうすればよいですか？

react-nativeecmascript-6
21
bazi

試してください：

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

21
Ilanus

おそらく、コードをまったく異なる方法で構成する必要があります。

良いルールは、すべてのビューから離れて、すべての定数を別のファイルに保存することです。

すべてのアプリ定数のファイルを作成してみてください。 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
28
parker

これは単なる関数のスコープルールです！

// 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';
2
Seb Bizeul