跳到主要内容

导入组件

由于 Webpack 的关系,此项目安装程序支持 ES6 模块。

当然你仍可以使用 require()module.exports,但我们建议你改用 importexport

示例:

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;

请注意 默认导出和命名导出是有区别的。这是很常见的错误源。

我们建议在模块只导出单个对象(例如,一个组件)时,坚持使用默认导入和导出。当导出 Button 组件时,你应使用 export default Button 导入并使用 import Button from './Button' 引入。

命名导出对于导出多个函数的 utils 模块来说非常有用。一个模块最多可以有一个默认导出和任意多个命名导出。

了解有关 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.jsontsconfig.json 相关文档。