阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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参考文档。

      目录
      目录