create-react-app 导入组件

🌙
手机阅读
本文目录结构
axihe

导入组件

感谢 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;

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

我们建议你在模块仅导出单个内容时使用默认 importsexports(例如,组件)。

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

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

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

绝对路径导入Imports

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

这可以通过在项目根目录中配置jsconfig.jsontsconfig.json文件来完成。

如果您在项目中使用TypeScript,则将已经有一个tsconfig.json文件。

以下是JavaScript项目的 jsconfig.json 示例文件。您可以创建文件(如果尚不存在):

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

如果您使用的是TypeScript,则可以在项目文件tsconfig.jsoncompilerOptions内部配置baseUrl

现在,您已经配置了项目以支持绝对导入;

如果要导入位于的模块src/components/Button.js,则可以像这样导入模块:

import Button from 'components/Button';

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang