Exportation de composants dans React.js | bobbyhadz

Exportation de composants dans React.js #

Utiliser les exportations nommées pour exporter un composant dans React, par ex.
export function Button() {}. Le composant exporté peut être importé à l’aide de la commande
nommé import comme import {Button} from './another-file.js'. Vous pouvez utiliser autant de
d’exportations nommées que nécessaire dans un fichier.

Voici un exemple d’exportation de composants à partir d’un fichier appelé Buttons.js.

export function Button() {
  return <button>Click</button>;
}


export const SubmitButton = () => {
  return <button type="submit">Submit</button>;
};

Notez que l’utilisation de export sur la même ligne que la définition de la fonction revient à
la même chose que d’exporter les composants en tant qu’objet après qu’ils aient été déclarés.

function Button() {
  return <button>Click</button>;
}

const SubmitButton = () => {
  return <button type="submit">Submit</button>;
};


export {Button, SubmitButton};

Voici comment importer les composants dans un fichier appelé App.js.

import {Button, SubmitButton} from './Buttons';

export default function App() {
  return (
    <div>
      <Button />

      <SubmitButton />
    </div>
  );
}

Veillez à corriger le chemin qui pointe vers le fichier Buttons.js si vous devez le faire.
si nécessaire. L’exemple ci-dessus suppose que Buttons.js et App.js sont situés dans le
même répertoire.

Par exemple, si vous importez à partir d’un répertoire supérieur, vous feriez
import {Button, SubmitButton} from '../Buttons'.

Le site import/export est appelée
Modules ES6
en JavaScript.

L’exemple ci-dessus utilise des exportations nommées et des importations nommées.

La principale différence entre les exportations et importations nommées et par défaut est que vous pouvez
vous pouvez avoir plusieurs exportations nommées par fichier, mais vous ne pouvez avoir qu’une seule
par défaut.

Si vous essayez d’utiliser plusieurs exportations par défaut dans un seul fichier, vous obtiendrez une
erreur.

export default function Button() {
  return <button>Click</button>;
}

const SubmitButton = () => {
  return <button type="submit">Submit</button>;
};



export default SubmitButton

IMPORTANT : Si vous exportez une variable (ou une fonction fléchée) en tant que
exportation par défaut, vous devez la déclarer sur une ligne et l’exporter sur la suivante. Vous
Vous ne pouvez pas déclarer et exporter par défaut une variable sur la même ligne.

Examinons un exemple qui exporte 2 composants de fonction et utilise à la fois les exportations –
exportations par défaut et nommées.

export default function Button() {
  return <button>Click</button>;
}


export const SubmitButton = () => {
  return <button type="submit">Submit</button>;
};

Et voici comment importer les deux composants.

import Button, {SubmitButton} from './Buttons';

export default function App() {
  return (
    <div>
      <Button />

      <SubmitButton />
    </div>
  );
}

Remarquez que nous n’avons pas entouré l’importation par défaut d’accolades.

import Button from './Buttons'

Nous avons utilisé un import par défaut pour importer le fichier Button et un import nommé pour
pour importer le composant SubmitButton composant.

Notez que vous ne pouvez avoir qu’une seule exportation par défaut par fichier, mais vous pouvez avoir
autant d’exportations nommées que nécessaire.

Vous n’avez pas non plus à réfléchir aux membres qui sont exportés par défaut ou par
exportation nommée.