FineUI-100-Questions/questions/4.高阶组件的render-props.md

高阶组件的render props.md

在FineUI中,我们经常见到一些继承抽象组件的写法,为了实现某种功能,继承抽象组件重新定义一个组件

依据我们的编码规范,一个组件一个文件,被迫新建众多文件

//  用于loading效果的组件
const Widget1 = BI.inherit(BI.Pane, {

    beforeRender: function () {
        this.loading();
    },

});

//  用于封装可以点击的组件
const Widget2 = BI.inherit(BI.BasicButton, {

    render: function () {

    },

});

//  用于封装带有tooltip功能的组件
const Widget3 = BI.inherit(BI.Single, {

    render: function () {

    },

});

以BI.BasicButton举例,很多时候我们只是想快速创建一个可以点击的组件,此时可以借助render-props来实现

const MyButton = {
    type: "bi.basic_button",
    render: () => {
        return {
            type: "bi.vertical_adapt",
            items: [
                {
                    type: "bi.label",
                    text: "文字",
                }, {
                    type: "bi.icon_button",
                    cls: "delete-font",
                    title: "删除按钮",
                },
            ],
        };
    },
    handler: () => {
        console.log("点击了");
    },
};