You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.3 KiB
58 lines
1.3 KiB
2 years ago
|
## 高阶组件的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("点击了");
|
||
|
|
},
|
||
|
|
};
|
||
|
|
```
|