跳到主要内容

# React 组件导入

## 介绍​

大家在使用低代码引擎构建低代码应用平台时，遇到的一个主要问题是如何让已有的 React 组件能够快速低成本地接入进来。这个问题拆解下来主要包括两个子问题：

1. 如何给已有组件配置物料描述，
2. 如何构建出一个低代码引擎能够识别的资产包 (Assets)。

我们的产品「Parts·造物」可以帮助大家解决这个问题。我们通过在线可视化的方式完成物料描述配置，并且提供一键打包的功能生成引擎可以识别的资产包。

## 导入物料​

首先，我们需要在 物料管理 页面导入我们需要进行在线物料描述配置的物料。

- 点击列表左上方的 导入已有物料 按钮
- 在弹框中输入 npm 包名
- 点击 获取包信息 按钮，获取 npm 包基本信息
- 点击确定，导入成功

## 配置管理​

第二步：物料导入以后，我们就可以为导入的物料新增物料描述配置，点击右侧的组件配置开始配置。

### 新增配置​

- 点击配置管理右上角的 新增配置
  - 选择组件的版本号
  - 填写组件路径，一般和 npm 包的 package.json 里的 main 字段相同（如果填写错误，后面会渲染不出来）
  - 描述字段用于给这份配置增加一些备注信息。

为了降低配置成本，第一次新增配置的时候会自动解析组件代码，生成一份初始化组件物料描述。所以需要等待片刻，用于代码解析。解析完成后，点击配置按钮即可进入在线配置界面。

### 组件描述配置​

操作界面如下，接下来讲具体的配置流程

#### 新增组件​

如果新增配置的过程中，代码自动解析失败或者解析出来的组件列表不满足开发要求，我们可以点击左侧组件列表插件 新增 按钮，添加新的组件，具体的字段描述可以参考提示内容，以 react-color 为例：

#### 给组件增加物料描述​

- 打开左侧 Setter 面板
- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
- 各种 Setter 的介绍可以参看这篇文档：预置设置器列表
- 配置属性的基本信息（如图所示）
- 配置完成后点击右上角的保存

#### 高级配置（属性联动）​

举个栗子：如图所示，如果期望“设置器”这个配置项的值“被修改”的时候，下面的“默认值”跟着变化。

如何使用

组件的属性配置目前支持 3 个基本的联动函数：

- 显示状态：返回 true | false，如果返回 true，表示组件配置显示，否则配置时不显示
- 获取值：当调用该配置节点的 getValue 方法时触发的方法
- 值变化：当调用该配置节点的 setValue 方法时触发的方法

方法的第一个参数都是当前配置节点的对象，常用到的有以下几个：

- getValue(): 获取当前节点的值，如果当前节点是子节点的话，否则为 undefined
- setValue(): 设置当前节点的值，如果当前节点是子节点的话
- parent: 当前节点的父节点
- getPropValue(propName): 父节点获取子节点的属性值，propName 为子节点的属性名称
- setPropValue(propName, value): 父节点设置子节点的属性值，propName 为子节点的属性名称，value 为设置的值
- getConfig: 获取当前节点的配置，如 title、setter 等

#### 调试物料描述​

点击右上角的预览按钮，开始调试我们刚刚配置的属性，如果是组件的首次预览，会有一段组件构建的过程（构建出 umd 包的过程），构建完成后就可以调试我们的配置了。

#### 发布物料描述​

物料描述调试没问题后，就可以到项目中去使用了，使用前需要先发布物料描述

- 点击右上角的发布按钮
- 选择需要发布的组件
- 点击确定发布完成

## 资产包​

第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。

#### 资产包构建​

有两种方式可以构建资产包：

- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 资产包管理

- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：

  - 选择需要构建的组件
  - 点击构建资产包按钮
  - 选择刚刚的物料描述配置
  - 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了

#### 资产包使用​

详情请参考 资产包管理

## 联系我们​