Exportieren von jsx-Komponenten in index.js-Dateien

Question

Wie kann ich react-Komponenten, die in jsx-Dateien definiert sind, in einer index.js-Datei bündeln?

In einer Weise, dass die Komponenten von import module from "/module"; let C = module.Component; zugegriffen werden können.

mit:

/module 
    index.js 
    Component.jsx 

Answer 1

export Component from "./Component" 

Sie sollten nicht exportieren Standard für Ihren Anwendungsfall verwenden. Es gibt nur einen Standardexport pro Modul. Dieser Wert ist als "exportierter Hauptwert" zu betrachten, da er am einfachsten zu importieren ist. Siehe https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export für weitere Einzelheiten

Answer 2

Um die Komponente als Standardexport erneut zu exportieren:

export { default } from './Component'; 

Um die Komponente als benannte Export erneut zu exportieren:

export { default as NamedComponent } from './Component'; 

Sie bevorzugen sollen den Export als Standard von index.js, da es wahrscheinlich der einzige Export aus dem Index sein wird.

Ihre Komponente Import wird wie folgt aussehen:

import Component from './module'; 

oder diese, wenn Sie einen Namen Export verwenden:

import { NamedComponent } from './module'; 

Angenommen, Sie webpack verwenden Ihre Dateien zu bündeln, um sicherzustellen, Ihre Importe können './Component' anstelle von './Component.jsx' verwenden, einschließlich .jsx als Erweiterung in Ihrer resolve Eigenschaft in webpack.config.js:

module.exports = { 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
};