基础组件扩展

基础组件库

基础组件库

  • MDF对tinper-bee 进行了封装

undefined

图 1

  • 如何引用组件?

例如

import { Tag } from 'antd';

undefined

图 2

以基础组件库的标签为例

文档地址

undefined

图 2

目标

设置一个标签控件,并使用

创建文件

src/web/common/extends/basic/ 下创建 mytag.jsx

undefined

图 3

标签库点击查看源码

复制粘贴到mytag.jsx中

undefined

图 4

/**
*
* @title 语意色标签
* @description 表示提示信息的标签。
* 
*/
import React, { Component } from 'react';
import { Tag } from 'tinper-bee';

class Demo2 extends Component {
    render () { 
        return (
            <div className="demoPadding">
                <Tag colors="success">success</Tag>
                <Tag colors="warning">warning</Tag>
                <Tag colors="danger">danger</Tag>
                <Tag colors="info">info</Tag>
             </div>
        )
    }
}

export default Demo2;

修改代码

  • 修改名称为mytag
  • 修改引入的组件为MDF的
  • 增加构造方法 props可以获取到组件的属性及viewModel

/**
*
* @title 语意色标签
* @description 表示提示信息的标签。
* 
*/
import React, { Component } from 'react';
import { Tag } from 'antd';

class mytag extends Component {

    constructor(props) {
        super(props);
    }

    render () {
        let {cCaption} = this.props 
        return (
            <Tag color="yellow">{cCaption}</Tag>
        )
    }
}

export default mytag;

分析

会发现

<Tag color="yellow">{cCaption}</Tag>

传参有变化,这就是MDF封装导致的差异。需要看源码来调整

  • 查看组件代码,按Ctrl+鼠标点击即可穿透查看

undefined

图 5

undefined

图 6

undefined

图 7

注册

src/web/common/extends/basic/index.jsx

undefined

图 8

export mytag from './mytag';

使用

修改控件的cControlType属性的值为:mytag

undefined

图 9

效果展示

undefined

图 10

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""