web-dev-qa-db-fra.com

es6: comment importer const après exportation?

Je m'excuse pour mon manque de connaissances. Je veux importer une valeur const dans un fichier. J'ai deux fichiers Home.js et styles.js dans le même répertoire.

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;

Et dans styles.js

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

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

mais je reçois cette erreur

Impossible de trouver la variable: HEADER_MAX_HEIGHT

comment puis-je accéder à cette variable dans styles.js?

react-nativeecmascript-6
21
bazi

Essayer:

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,
  },
});

Votre HEADER_MAX_HEIGHT doit se trouver dans le Home.js mais en dehors du composant Home. Vous pouvez en lire plus ici: Portée Javascript

21
Ilanus

Vous devriez probablement structurer votre code d'une manière complètement différente.

Une bonne règle consiste à conserver toutes les constantes dans un fichier séparé, loin de toutes les vues.

Essayez de créer un fichier pour toutes les constantes d'application. Constants.js est un bon choix.

Ensuite, mettez des constantes comme ceci:

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

Ensuite, vous pouvez importer vos constantes où vous en avez besoin.

import Constants from '../Folder/Constants'

et utiliser comme tel

const x = Constants.HEADER_MAX_HEIGHT
28
parker

C'est juste une règle de portée de fonction!

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

Vous n'avez pas accès à HEADER_MAX_HEIGHT dans la portée externe. Ainsi, lorsque vous essayez de l'exporter, cela renvoie simplement une erreur.

Essayez avec ceci:

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

const HEADER_MAX_HEIGHT = 200;

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

export { HEADER_MAX_HEIGHT };
export default Home;

Maintenant dans styles.js:

import { HEADER_MAX_HEIGHT } from './Home';
2
Seb Bizeul