Exporter par défaut dans React

Nous allons présenter les types d’exportation dans React et ce qu’ils font.

Types d’exportations dans React

Les exportations comme export default ReactApp; et les importations comme import logo from './logo.svg' font partie du système de modules ES6.

Il existe deux types d’exportations dans ES6 : les exportations nommées et les exportations par défaut.

Exportations nommées dans React

Les exports qui sont exportés à l’aide du nom de la fonction sont appelés exports nommés tels que export Function ExFunc(){}.

Les modules nommés peuvent être importés en utilisant import { ExFunc } from 'module';. Le nom de l’importation doit être le même que le nom de l’exportation, comme dans cet exemple ExFunc.

Nous pouvons avoir plusieurs exports nommés dans un module.

Exportations par défaut dans React

La valeur par défaut export est utilisée pour exporter une seule classe, primitive ou fonction à partir d’un module. Il existe différentes manières d’utiliser les export par défaut.

Habituellement, export par défaut est écrit après la fonction, comme dans l’exemple ci-dessous.

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Mais il peut aussi être écrit comme ci-dessous.

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

Et pour les fonctions, il peut être écrit comme.

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

Une fois que nous avons utilisé un export par défaut, nous n’avons pas nécessairement besoin de l’importer en tant que ReactApp ; nous pouvons lui donner n’importe quel nom.

# react
import Y from './ReactApp';

Y est le nom qui sera donné localement à la variable assignée pour contenir la valeur, et il n’est pas nécessaire qu’elle soit nommée l’exportation d’origine.

Une chose importante à retenir lors de l’utilisation de default export est qu’il ne peut y avoir qu’un seul default export, contrairement à named export. Un module peut avoir à la fois une exportation nommée et une exportation par défaut, et elles peuvent être importées ensemble.

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';