В JavaScript и JSX (расширение синтаксиса JavaScript, используемое React) оператор export defaultиспользуется для экспорта одного значения или модуля из файла в качестве экспорта по умолчанию. Если файл имеет экспорт по умолчанию, это означает, что при импорте другого файла из этого файла он по умолчанию получит экспортированное значение или модуль по умолчанию без необходимости указывать конкретное имя импорта.
Вот пример, иллюстрирующий его использование:
В файле с именем MyComponent.js:
const MyComponent = () => {
// Component implementation
};
export default MyComponent;
В другом файле, куда вы хотите импортировать MyComponent, вы можете сделать это следующим образом:
import MyComponent from './MyComponent';
// You can use MyComponent here
Обратите внимание, что имя, используемое для импорта экспорта по умолчанию (в данном случае MyComponent), может быть любым допустимым идентификатором по вашему выбору.
Теперь давайте перейдем к некоторым другим методам, обычно используемым в JSX:
-
Именованный экспорт:
export const ComponentA = () => { // Component implementation }; export const ComponentB = () => { // Component implementation };В другом файле:
import { ComponentA, ComponentB } from './MyComponents'; // You can use ComponentA and ComponentB here -
Экспорт по умолчанию и именованный экспорт вместе:
const ComponentA = () => { // Component implementation }; const ComponentB = () => { // Component implementation }; export { ComponentA, ComponentB as default };В другом файле:
import MyComponents, { ComponentA } from './MyComponents'; // You can use MyComponents (default export) and ComponentA here -
Экспорт переменных, функций и констант:
export const myVariable = 'Hello'; export function myFunction() { // Function implementation } export const myConstant = 42;В другом файле:
import { myVariable, myFunction, myConstant } from './MyExports'; // You can use myVariable, myFunction, and myConstant here