导入组件

此项目设置支持 ES6 模块，这要归功于 webpack。

虽然您仍然可以使用 require() 和 module.exports，但我们鼓励您使用 import 和 export。

例如

Button.js

import React, { Component } from 'react';

class Button extends Component {
  render() {
    // ...
  }
}

export default Button; // Don’t forget to use export default!

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}

export default DangerButton;

请注意 默认导出和命名导出之间的区别。这是一个常见的错误来源。

我们建议您在模块只导出一个东西（例如，一个组件）时，坚持使用默认导入和导出。当您使用 export default Button 和 import Button from './Button' 时，您会得到这样的结果。

命名导出对于导出多个函数的实用程序模块很有用。一个模块最多可以有一个默认导出，以及任意数量的命名导出。

了解更多关于 ES6 模块的信息

• 何时使用花括号？
• 探索 ES6：模块
• 理解 ES6：模块

绝对导入

您可以配置您的应用程序以支持使用绝对路径导入模块。这可以通过在项目根目录中配置一个 jsconfig.json 或 tsconfig.json 文件来完成。如果您在项目中使用 TypeScript，您将已经有一个 tsconfig.json 文件。

下面是一个 JavaScript 项目的 jsconfig.json 文件示例。如果文件不存在，您可以创建它。

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

如果您使用的是 TypeScript，您可以在项目 tsconfig.json 文件的 compilerOptions 中配置 baseUrl 设置。

现在您已经配置了您的项目以支持绝对导入，如果您想导入位于 src/components/Button.js 的模块，您可以像这样导入模块

import Button from 'components/Button';

有关这些配置文件的更多信息，请参阅 jsconfig.json 参考 和 tsconfig.json 参考 文档。