Экспорт реакции jsx-components в файлы index.js

Question

Как связать компоненты-реакции, определенные в jsx-файлах, в файле index.js?

Таким образом, к компонентам можно получить доступ к import module from "/module"; let C = module.Component;.

С:

/module 
    index.js 
    Component.jsx 

Answer 1

export Component from "./Component" 

Вы не должны использовать экспорт по умолчанию для использования. Для каждого модуля существует только один экспорт по умолчанию. Это значение следует рассматривать как «основное» экспортируемое значение, поскольку оно будет самым простым в импорте. См https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export подробнее

Answer 2

Чтобы повторно экспортировать компонент в качестве экспорта по умолчанию:

export { default } from './Component'; 

реэкспорта компонент в качестве именованного экспорта:

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

следует отдавать предпочтение экспортировал по умолчанию от index.js, так как это будет единственный экспорт из индекса.

Ваш компонент импорта будет выглядеть следующим образом:

import Component from './module'; 

этом, если используется именованный экспорт:

import { NamedComponent } from './module'; 

Предполагая, что вы используете Webpack объединять файлы, чтобы убедиться, ваш импорт может использовать './Component' вместо './Component.jsx', включают .jsx в качестве дополнительного номера в вашем resolve Недвижимость в webpack.config.js:

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