久久躁夜夜躁狠狠躁,色yeye网址在线观看,东京热无码人妻系列综合网站

本文將介紹 Quick BI 自定義組件的基本概念。

自定義組件

在 Quick BI 中，自定義組件 (CustomComponent) 定義是一個包含了bootstrap、mount、unmount、update屬性的對象，包含了自定義組件具體的實(shí)現(xiàn)的邏輯。詳細(xì)信息請參考Lifecycle。

舉例

// 這是一個自定義組件
const CustomComponent = {
    bootstrap: (props) => {},
  mount: (props) => {},
  unmount: (props) => {},
  update: (props) => {},
}

說明

在大多數(shù)情況下，您無需關(guān)心自定義組件的生命周期，bi-open-sdk和bi-open-react-sdk提供了創(chuàng)建自定義組件的createBIComponent函數(shù)，直接調(diào)用即可。

自定義組件元信息

自定義組件元信息（ComponentMeta）是一個包含了propsSchema等屬性的對象。通過元信息可以定制 Quick BI 自定義組件的數(shù)據(jù)面板/樣式面板/高級面板等功能，詳細(xì)信息請參考ComponentMeta。

舉例

const meta = {
    propsSchema: {
      dataSchema: {
        schema: {}
    },
    styleSchema: {
        schema: {}
    },
  }
}

項(xiàng)目結(jié)構(gòu)

創(chuàng)建Quick BI自定義組件的最佳方式是使用create-qbi-app命令創(chuàng)建種子項(xiàng)目。通過npm init qbi-app <project name>命令創(chuàng)建，請參見快速開始。

文件目錄

生成好種子項(xiàng)目后，文件目錄結(jié)構(gòu)如下：

├── build                # 構(gòu)建產(chǎn)出目錄
├── node_modules         # 項(xiàng)目相關(guān)包依賴
├── public               # 本地調(diào)試入口
│    └──index.html
├── src                  # 源碼
│    ├──index.tsx        # 組件入口
│    ├──index.scss       # 組件樣式文件
│    └──meta.ts          # 組件屬性配置，包括數(shù)據(jù)、樣式以及數(shù)據(jù)到視圖的映射關(guān)系等。
├── .eslintrc            # eslint插件的配置文件
├── config-overrides.js  # webpack配置文件
├── package.json         # 依賴包管理
├── README.md            # 項(xiàng)目說明文檔
└── tsconfig.json        # typescript配置文件

相關(guān)命令
- npm run start：啟動本地調(diào)試
- npm run build ：構(gòu)建項(xiàng)目
- npm run pack：將構(gòu)建結(jié)果打包為Quick BI開發(fā)包，會默認(rèn)先執(zhí)行npm run build。
src目錄
該文件夾包含自定義組件的源代碼。包含：
- meta.ts：自定義組件元信息, 用于配置數(shù)據(jù)面板和樣式面板。
- index.tsx：自定義組件。
- index.scss：自定義組件樣式文件。
public目錄
該文件夾包含了devserver的html模板和mock數(shù)據(jù)。
build目錄
該文件夾包含了構(gòu)建產(chǎn)出以及打包的結(jié)果。
執(zhí)行npm run build后，會產(chǎn)出如下模塊：
文件名
模塊類型
模塊名稱
main.js
umd
BIComponent
meta.js
umd
BIComponentMeta
main.css
-
-
說明
為了確保產(chǎn)出結(jié)果的正確性，請不要隨意更改webpack的配置。