create-react-app 导入组件

导入组件

感谢 Webpack ，该项目设置支持 ES6 modules。

虽然你仍然可以使用 require() 和 module.exports，但我们建议你使用 import 和 export。

例如：

Button.js

import React, { Component } from 'react';

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

export default Button; // 别忘了使用 export default ！ 

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; // 从其他文件导入一个组件

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

export default DangerButton;

请注意 默认导出和命名导出之间的区别。这里经常有人犯错误。

我们建议你在模块仅导出单个内容时使用默认 imports 和 exports（例如，组件）。

当你使用 export default Button 时，可以使用 import Button from './Button'导入。

命名导出对于导出多个函数的实用程序模块很有用。

一个模块最多可以有一个默认导出和任意多个命名导出。

• 什么时候使用花括号？
• 了解ES6：Modules

绝对路径导入Imports

您可以将应用程序配置为支持使用绝对路径导入模块。

这可以通过在项目根目录中配置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参考文档。