脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React用相对于根目录进行引用组件

React如何利用相对于根目录进行引用组件详解

 更新时间：2017年10月09日 09:46:35   作者：PeckZeg  
这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

前言

本文主要给大家介绍了关于React利用相对于根目录进行引用组件的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

在对自己开发的组件中经常会做诸如以下的引用：

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from '../../../utils/query';
import mapMyToProps from '../../../utils/connect/mapMyToProps';
import genPagination from '../../../utils/table/pagination';
import handleConfirm from '../../../utils/handleConfirm';
import getBaseQuery from '../../../utils/getBaseQuery';
import setSortQuery from '../../../utils/setSortQuery';
import handleError from '../../../utils/handleError';
import injectProto from '../../../utils/injectProto';
import injectApi from '../../../utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

这样使用相对路径引用虽然是比较常见的做法，不过在中大型项目中，引入的组件较多时，写起来也是极其蛋疼的。

当然，我们可以通过使用 webpack 中的 resolve.alias 配置别名，将某些文件目录配置成固定的引入。

例如上面的示例，我们可以将 utils 文件夹设置成一个 utils 别名，以后就可以只需要将 utils 引入就行了，而不需要写一坨 ../../../。

配置设置如下：

const path = require('path');

module.exports = {
 ...
 resolve: {
  alias: {
   'utils': path.resolve(__dirname, '../src/utils'),
  }
 },
 ...
};

最上面的示例经过改写之后，应该如此：

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from 'utils/query';
import mapMyToProps from 'utils/connect/mapMyToProps';
import genPagination from 'utils/table/pagination';
import handleConfirm from 'utils/handleConfirm';
import getBaseQuery from 'utils/getBaseQuery';
import setSortQuery from 'utils/setSortQuery';
import handleError from 'utils/handleError';
import injectProto from 'utils/injectProto';
import injectApi from 'utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • React实现类似于Vue中的插槽的项目实践

    React实现类似于Vue中的插槽的项目实践

    本文主要介绍了React实现类似于Vue中的插槽的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • React 原理详解

    React 原理详解

    这篇文章主要介绍了深入理解react的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • 详解React setState数据更新机制

    详解React setState数据更新机制

    这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
    2021-04-04
  • React + Threejs + Swiper 实现全景图效果的完整代码

    React + Threejs + Swiper 实现全景图效果的完整代码

    全景图效果非常漂亮给人带来极好的用户体验效果，那么基于前端开发如何实现这种效果呢，下面小编给大家带来了React + Threejs + Swiper 实现全景图效果，感兴趣的朋友一起看看吧
    2021-06-06
  • react的ui库antd中form表单使用SelectTree反显问题及解决

    react的ui库antd中form表单使用SelectTree反显问题及解决

    这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • ReactJs实现树形结构的数据显示的组件的示例

    ReactJs实现树形结构的数据显示的组件的示例

    本篇文章主要介绍了ReactJs实现树形结构的数据显示的组件的示例，非常具有实用价值，需要的朋友可以参考下
    2017-08-08
  • React中props使用教程

    React中props使用教程

    props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
    2022-09-09
  • ReactDOM 隐藏特性详解

    ReactDOM 隐藏特性详解

    这篇文章主要为大家介绍了ReactDOM 隐藏特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 在React项目中实现一个简单的锚点目录定位

    在React项目中实现一个简单的锚点目录定位

    锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节,本文讲给大家介绍一下React项目中如何实现一个简单的锚点目录定位,文中有详细的实现代码,需要的朋友可以参考下
    2023-09-09
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定，文中给出了示例代码，对大家的理解与学习很有帮助，有需要的朋友下面来一起看看吧。
    2016-09-09

最新评论