Create React App 导入组件

感谢 Webpack ,该项目设置支持 ES6 modules。
虽然你仍然可以使用 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;

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

我们建议你在模块仅导出单个内容(例如,组件)时坚持使用默认importexport。 当你使用 export default Button 时,可以使用 import Button from './Button'导入。

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

了解有关ES6模块的更多信息:


上一篇:安装依赖项
下一篇:使用全局变量