阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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;
    

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

    我们建议你在模块仅导出单个内容时使用默认 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参考文档。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录