组件

自定义组件是什么

组件开发环境

组件的调试与发布

组件库的构成

每一个组件库，都由以下部件构成：

组件库开发步骤

在接下来的小节中，我们将详细说明怎样从零开始开发一个自定义组件。

首先我们提供了三个自定义组件的壳应用模板，在以下三个模板中，我们分别引入了ant design，element，material三个常用的UI库，每个库都制作了4个demo组件，包括：按钮、提示弹框、下拉菜单与数据表格。

开发一个自定义组件库的步骤主要包含：

引入NPM包（可跳过）
添加组件，编写组件JSX文件（核心步骤，不可跳过）
填写属性、方法（动作）、事件配置文档（可根据组件需求来选择性填写）
编译调试
上传发布组件库

接下来，我们将以ant design的组件库为例，来详细讲解每一个步骤。

引入npm包

自定义组件支持引入一个或多个外部的npm包，也可以不引入任何npm包。

我们例子中用到的ant design组件库，需要引入两个NPM包：

我们暂时不指定版本，系统在组件编译时，会自动使用当前包最新的版本。

开始编写组件JSX

组件JSX文件，是组件的核心代码定义，不可为空。接下来我们依然以ant design库为例，来讲解JSX文件的编辑要点。

1、先引用此jsx需要的相关库

import React from ‘react’ // 这个是引用react，iVX环境自定react库（当前版本16.13），不需要额外引入NPM包；
import { Button } from ‘antd’ // 这里是引入antd的按钮，来自之前引入的antd NPM包
import ‘antd/dist/antd.css’ // 这里是引入antd库的css文件

2、开始编写类

引入依赖之后，我们接下来就创建一个React Component类，并直接export：

export default class XXXX extends React.Component {
// 这里写代码
}

注意，这里的类名 XXXX 要以大写开头。

以button组件为例，JSX代码如下图所示：

开发组件属性

组件属性的制作包含两个部分：

1、在JSX文件中定义属性渲染规则：

在render函数中，我们首先定义了iVX组件的内部属性集合，这些属性集合中的属性，就是我们希望出现在属性面板中的属性了。

首先，我们将需要抽取出来的组件库中组件自带的属性，与iVX内的属性名称进行一个对应。在这个例子中，我们没有进行任何修改，直接沿用了组件原始的名称，之后我们可以进一步在属性配置文档中，对这些属性进行翻译和说明。

接下来，我们额外添加了一个visible属性，这个属性即iVX编辑器中的“可见属性”。当这个属性关闭时，就不渲染这个组件，方便在编辑器中进行控制。

最后，我们可以为我们的各个属性添加默认值，这个步骤是可选，非必须的：

2、配置属性文档

组件属性的配置文档，是另一个组件的构成部件，用于定义属性面板的行为：

其内部是一个JSON格式的文件：

JSON的结构是一个标准的对象数组，外层是一个数组，代表多个属性，每个数组元素，是一个对象，除了name和type，其他都是非必填字段，每个字段的意义如下：

type字段说明：

group字段说明：

group示例可参考
{
“name”: “colordaa”,
“type”: “Color”,
“defaultValue”: “#00AEFF”,
“group”:”styles”,
“locale”:{
“zh”: “主颜色”
}
}

定义组件方法

组件方法的定义也包含两部分：

1、在JSX文件中编写方法代码：

在JSX的class定义中，我们需要声明相应的方法：

比如，在以上代码片段中，我们定义了提示框组件的两个方法。

2、填写方法配置文档

方法定义的JSON文件也是一个对象数组，每个数组元素对应一个方法。比如，针对以上的提示框组件JSX中定义的方法，配置文档写法如下：

所有方法对象内的字段说明如下：

其中，params为一个数组，用来定义方法的入参，其中数组的每个对象内参数说明如下：

params中的type说明：

callback的说明：

callback用于定义动作的回调，在jsx内写法一般是定义了动作后，最后一个参数为回调，比如：

function demo (param1, param2, cb) {
cb(status, {xx: yy}) // cb为回调，status为回调的状态，{xx: yy}为回调的参数
}

callback内的参数说明：

定义组件事件

组件事件的定义，也包括两部分：

1、在JSX文件中定义事件

首先我们需要在render函数中，将我们需要用到的方法类属性进行一个绑定：

如上图所示，在button组件中，第一个onClick就是一个方法属性，我们将其绑定至当前自定义组件的一个方法 onBtnClick()。

这个onBtnClick的定义如下：

其中，前半部分 “this.props.onClick”是一个判断，判断是否从外部传入了“click”这个事件，如果有传入才执行后面的事件触发方法。注意，“on”后面的事件名称首字符需要大写，比如，我们在事件配置文档中定义的事件名称是“click”，这里的方法就要填成“onClick”。

如果需要处理事件参数，将事件的参数抛出给到用户去处理，则需要在方法定义时指定参数：

比如在以上下拉菜单组件的“选中选项”的方法定义中，我们传入了参数“value”。

2、配置事件文档

组件的事件配置文档，用来定义组件在事件面板中的触发事件。

其内部也是一个JSON文件：

在以上事件配置文档中，我们定义了两个事件，一个是初始化，一个是点击。其中，点击还会进一步抛出事件的参数，可以在事件触发时在事件面板逻辑中引用。

每个事件定义的字段说明如下：

params字段说明：

事件定义中，配置文档里的名称和有JSX文件中的方法定义有以下对应关系：

其中，红色部分为事件名称，注意，在JSX文件的方法定义中，需要将事件名称的首字母大写，并在前面添加“on”，以指定这是一个事件处理。紫色部分为参数名称，定义了参数之后，用户就可以在事件触发时引用到参数了。

组件通信的方法

组件在使用过程中往往需要与外部组件进行交互通讯，这里以修改组件自身可见属性visible为例，介绍几种基本的组件通信方法：

首先我们给组件设置好visible属性：

然后在render函数中利用visible属性判断是否将组件渲染出来：

效果如下：

方法1、外部 “设置属性”

”设置属性“可实现更新组件属性的效果，外部组件通过该方法即可与组件内部进行通信，如图即实现组件”可见“的修改：

效果：

方法2、内部抛出事件

组件内部有时候需要将数据发送到外部，那就可以通过触发组件事件的方式将数据往外传，以下展示组件如何通过事件抛出的方式设置自身的可见属性：

首先定义一个组件事件，命名为changeVisibleEvent，那么该事件对应的触发函数便是props.onChangeVisibleEvent

然后由组件内部触发该事件，并附带一个visible值：

抛出事件并未能修改visible值，这里还需要捕获事件，然后进行赋值处理：

效果：

3、vModel绑定数据

如果希望从自定义组件内部的函数出发，对自身属性进行修改的话，那么可以使用vModel的方式对属性进行绑定。

首先我们给组件设置vModel的值：

如上图，vModel为一个字符串数组，其中每个数组元素以半角逗号 “,” 拆分成三个参数，一个数组元素就代表一个绑定的属性字段：
参数1：触发属性更新事件的方法名。类似于注册一个事件，参数一就是这个事件的名称，可以通过触发事件的方法触发它。
参数2：绑定的属性名，也就是需要更新的属性字段名
参数3：传入的字段名

在vModel写好后，组件内部就能通过如下方式，主动修改自身的（参数二）属性：

this.props.on大写首字母参数一({
参数3: xxx
})

如上图组件中vModel对visible的设置方式，在自定义组件内部函数中，更改visible属性的方式就是：

如方法2按钮点击的方式触发该vModel方法，即可实现props更改。最终效果和方法2的抛出事件方式一样，且省略了捕获事件处理的过程。

e