react 组件库封装（一）

柔情只为你懂 2022-06-12 07:50 298阅读 0赞

打算封装一套控件库来满足后台系统开发。  
比如调用封装的GoLayOut控件，

import {GoLayout} from '../../components/goingComponent'

其实这里访问的是：  
/components/goingComponent/index.js  
大概内容如下：

var _goLayout = require('./goLayout');
    
    function _interopRequireDefault(obj) {  return obj && obj.__esModule ? obj : { 'default': obj }; }
    Object.defineProperty(exports, 'GoLayout', {
      enumerable: true,
      get: function get() { 
        return _interopRequireDefault(_goLayout)['default'];
      }
    });

通过扩展export属性的方式来进行控件导出，可以理解这里是控件注册区域。

将属性添加到对象，或修改现有属性的特性。
    
    **Object.defineProperty(object, propertyname, descriptor)**
    参数
    object
    必需。  要在其上添加或修改属性的对象。  这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。  
    propertyname
    必需。  一个包含属性名称的字符串。  
    descriptor
    必需。  属性描述符。  它可以针对数据属性或访问器属性。

//这里才真正导入的控件
    var _goLayout = require('./goLayout');
    
    控件的文件机构如图:

![这里写图片描述][SouthEast]

其实控件封装代码需要写在goLayout.js文件中。

[SouthEast]: /images/20220612/ff08d7044e54408ea9b499f96cc37499.png

发表评论取消回复

表情：

评论列表（有 0 条评论，298人围观）

还没有评论，来说两句吧...

相关阅读

相关 React Suite 组件库

React Suite 是一套 React 组件库，为后台产品而生，支持 Typescript，支持 RTL，支持服务端渲染 ![watermark_type_ZmFuZ3p

心已赠人/ 2023年02月11日 04:53/ 0 赞/ 41 阅读

相关【vue组件封装】ECharts组件封装随笔

内容 > 记录组件封装思路 > 实现ECharts 组件的封装写在前面写在前面：对于愈来愈火的前端框架，用起来着实是让人很舒心。对于大型项目来说，组件化思

柔光的暖阳◎/ 2022年12月03日 15:51/ 0 赞/ 469 阅读

相关 React 组件封装之 Tree 树形控件

React 组件封装之 Tree 树形控件一、Tree 树形结构二、使用案例三、API 使用指南四、源代码五、总结一、Tre

女爷i/ 2022年11月20日 08:01/ 0 赞/ 1210 阅读

相关 css实现数字切换动画（封装成React组件）

背景最近做项目遇到一个需求，要做选择优惠券后金额试算的一个金额切换的动画效果，如图所示： ![金额切换效果.gif][.gif] 然后我把做了几个小demo用于演示

心已赠人/ 2022年11月07日 11:41/ 0 赞/ 600 阅读

相关顶级React组件库推荐

![format_png][] 作者丨Max Rozen 译者丨王强策划丨小智 Ant Design ![format_png 1][] 项目链接：

蔚落/ 2022年10月29日 13:21/ 0 赞/ 238 阅读

相关一文秒懂React组件

React 组件介绍组件是React 的一等户，使用React的同时就是在使用组件组件表示页面中部分功能多个组件的组合实现完整页面功能特点

太过爱你忘了你带给我的痛/ 2022年10月14日 13:52/ 0 赞/ 190 阅读

相关 2021 最顶级 React 组件库推荐

作者丨Max Rozen 译者丨王强策划丨小智 Ant Design ![57c40c4c43b03e220c119513539ab4de.png][] 项目

墨蓝/ 2022年09月16日 14:28/ 0 赞/ 227 阅读

相关 react 组件库封装（一）

打算封装一套控件库来满足后台系统开发。比如调用封装的GoLayOut控件， import {GoLayout} from '../../components/g

柔情只为你懂/ 2022年06月12日 07:50/ 0 赞/ 299 阅读

相关编写一个 React 组件库（一）：写一个简单的 Button 组件

这个项目基于webpack，配 webpack 的教程：[https://blog.csdn.net/qq593249106/article/details/84892069]

绝地灬酷狼/ 2022年04月10日 06:29/ 0 赞/ 566 阅读

相关 react 封装通用组件之table组件

react 封装通用组件之table组件 > 工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯

浅浅的花香味﹌/ 2021年12月01日 11:38/ 0 赞/ 1145 阅读