自定义组件常见问题

组件删除兼容性

目前组件已开放删除和卸载操作，请开发者自行保障组件向前兼容。

怎么理解自定义组件

可以参考这个链接

组件的构成

组件由视图和属性构成，在组件的消费侧可以通过改变组件的属性让组件展示出不同的视图。

视图再细分可以分为设计视图和运行时视图，一般情况下设计视图和运行时视图可以复用。

在组件的生产侧，我们要分别构建组件的视图和属性。

带自定义组件的应用通过应用分发给其他组织，能正常打开吗？

可以。

带自定义组件的应用分发给其他组织后，该组织也可以正常使用该组件，且分发应用支持开启编辑权限时，分发后的应用支持安装组件。

页面中如何访问自定义组件的属性？

自定义组件和基础组件一样，使用 this.$('fieldId').get('propName') 获取对应组件的属性。

页面中如何更新自定义组件的属性？

自定义组件和基础组件一样，使用 this.$('fieldId').set('propName', propValue) 更新对应组件的属性。

或者使用绑定数据源变量的方式。

组件中如何获取页面的组件，和页面内的组件做联动？

可以通过给自定义组件添加一个 function 类型的属性，即事件回调。

在页面中可以通过这个事件回调和页面其他组件做联动。

在组件中可以通过 this.props.xxx() 在合适的时机，比如组件的某个事件或组件的 DidMount 来执行这个回调。

小提示： function 类型的属性可以添加默认值并且可以设置隐藏。

自定义组件支持安装三方的 NPM 包吗？

A：暂时不支持，可以采用动态加载 CDN 的资源方式。

function loadScript(src, callback) {   if (!src) {     return;   }   const node = document.createElement('script');   node.src = src;   node.addEventListener('load', callback, false);   document.head.appendChild(node); } function loadCss(url) {   const linkElement = document.createElement('link');   linkElement.rel = 'stylesheet';   linkElement.href = url;   document.body.appendChild(linkElement); } (function loadAssets() {   loadCss('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css');   loadScript('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js', () => {     // your code    }); })();

组件安装后，在面板里看不到？

A: 检查下安装范围

自定义组件如何在表单中提交数据？

A: 目前宜搭的自定义组件还未开放表单组件，若想要提交数据可以采用填充到已有的表单组件的方式。例如：声明一个 唯一标识 的属性，在使用时传入已有的表单唯一表单，在组件侧通过事件将需要的数据回填到已存在的表单上。

组件版本说明

组件分 开发版和正式版。

宜搭的自定义组件版本在语义化版本的基础上做了额外的约定。

1. 0.1.0 默认为开发版本，开发版可和组件设计器保持实时同步，用来调试组件。
2. 1.x.x 为发布后的正式版本，会固定当前版本的功能，保证线上使用该组件的稳定性。所以线上的正式应用请务必安装 1.x.x 发布后的正式版本。

我定义了一个属性，改变这个属性，组件内如何根据这个属性来产生变化？

在组件设计器内，找到需要发生变化的组件，找到相关的属性，给该属性绑定一个变量或者自定义处理函数，通过 this.props.xxx 来判断做不同的处理。例如：

或

组件中能动态设置样式吗？

可以使用容器组件，通过给容器组件添加 「自定义样式类」，绑定变量控制。

自定义组件是否支持上下级、上下游组织？

A：自定义组件目前暂不支持跨组织使用，包括上下级、上下游组织。