“导出默认值”在 JSX 中有什么作用？

javascript reactjs

2022-08-30 00:29:21

我想问最后一句话是什么意思和做什么（导出默认的HelloWorld;）但我找不到任何关于它的教程。

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

答案 1

像导出和导入，如是ES6模块系统的一部分。export default HelloWorld;import React from 'react'

模块是一个独立的单元，可以使用向其他模块公开资产，并使用从其他模块获取资产。exportimport

在代码中：

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

在ES6中，有两种导出：

命名导出 - 例如，是名称为的命名导出。可以使用导入命名模块在这种情况下，导入的名称应与导出的名称相同。要导入示例中的函数，必须使用。一个模块中可以有多个命名导出。export function func() {}funcimport { exportName } from 'module';.import { func } from 'module';

默认导出 - 如果使用简单的 import 语句，则将从模块导入的值。X 是将在本地为指定用于包含值的变量指定的名称，并且不必像源导出那样命名。只能有一个默认导出。import X from 'module'

模块可以同时包含命名导出和默认导出，并且可以使用将它们一起导入。import defaultExport, { namedExport1, namedExport3, etc... } from 'module';

答案 2

export default用于从脚本文件中导出单个类、函数或基元。

导出也可以写为

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

您也可以将其编写为函数组件，例如

export default function HelloWorld() {
  return <p>Hello, world!</p>
}

这用于将此功能导入另一个脚本文件中

import HelloWorld from './HelloWorld';

您不一定要导入它，因为您可以为其指定任何名称，因为它是默认导出HelloWorld

关于出口的一点点

顾名思义，它用于从脚本文件或模块中导出函数，对象，类或表达式

实用工具.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

这可以导入并用作

应用程序.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

或

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

使用导出默认值时，这要简单得多。脚本文件只导出一件事。立方体.js

export default function cube(x) {
  return x * x * x;
};

并用作应用程序.js

import Cube from 'cube';
console.log(Cube(3)); // 27