Quick BI為自定義組件提供了下鉆、聯(lián)動(dòng)和跳轉(zhuǎn)等功能。調(diào)用dispatch方法即可。

const dispatch = props.customProps.dispatch;
const dataIndex = 1; // 需要下鉆的維度在 props.customProps.data 中的數(shù)組下標(biāo)

if (typeof dispatch === 'function') {
  dispatch({
    type: 'select',
    payload: {
      dataIndex: dataIndex,
    },
  });
}

Shadow DOM 可以將標(biāo)簽，樣式和行為隱藏起來(lái)，并與頁(yè)面上的其他代碼相隔離，保證不同的部分不會(huì)混在一起。在 Quick BI 中，自定義組件默認(rèn)都是渲染在 Shadow DOM 節(jié)點(diǎn)之內(nèi)，如果不需要開(kāi)啟 Shadow DOM，可以在自定義組件管理平臺(tái)中手動(dòng)關(guān)閉。

如果你的自定義組件需要支持低版本瀏覽器, 推薦使用 CSS Modules 隔離樣式. 在種子工程中已經(jīng)內(nèi)置支持了 CSS Modules, 只要是以 .module.css 或 .module.css 結(jié)尾的文件都可以直接 import使用，

// index.module.css
.test-class {
  color: #ddd;
}

// 編譯后的 index.module.css
._2GdXV4wBykbQ3MN-f1VJv7 {
  color: #ddd;
}

import styles from './index.css';

// 使用類(lèi)
document.getElementById('foo').classList.add(styles['test-class'])

CSS 實(shí)際上是沒(méi)有真正意義上的命名空間的.。為了模擬命名空間， 推薦使用 CSS BEM 規(guī)范。

// good, 所有樣式都寫(xiě)在 .my-component 父類(lèi)內(nèi).
.my-component {
  color: #ddd;

    ul {
      color: #aaa
  }

    &__header {}

  &__header--title {}
}

// bad, 樣式盡量不要定義在父類(lèi)之外
ul {
  background: #aaa
}

通過(guò)I18n.init可以初始化國(guó)際化，首先將翻譯好的語(yǔ)言，以key、value 的方式組裝到resources中, 然后導(dǎo)出 t 翻譯函數(shù)和 i18n實(shí)例。示例如下：

import { I18n } from 'bi-open-sdk';

const { t, i18n } = I18n.init({
  resources: {
    // 英文 key
    'en-US': {
      起始角度: 'start angle',
    },
    // 日文 key
    'ja-JP': {
      起始角度: '開(kāi)始角度',
    }
  },
});

在本示例中，我們?cè)O(shè)置了兩種語(yǔ)言：en-US和ja-JP，目前所支持的語(yǔ)種如下表。

區(qū)域字符串	語(yǔ)言
zh-CN	簡(jiǎn)體中文（默認(rèn)）
en-US	英語(yǔ)
ja-JP	日語(yǔ)

調(diào)用 t 函數(shù)可以翻譯語(yǔ)言， t 函數(shù)的返回值依賴(lài)resources配置的語(yǔ)言包，如果 resources中沒(méi)有配置對(duì)應(yīng)的從條翻譯， t 函數(shù)將返回第一個(gè)參數(shù)值。

console.log(t('起始角度')) // start angle

console.log(t('結(jié)束角度')) // 在 resources 未配置 "結(jié)束角度" 的翻譯, 返回 "結(jié)束角度"

通過(guò)i18n.changeLanguage可以切換語(yǔ)言，一般來(lái)說(shuō)Quick BI內(nèi)置了語(yǔ)言切換的邏輯，無(wú)需手動(dòng)調(diào)用i18n.changeLanguage。

// 默認(rèn)語(yǔ)言為 zh-CN
console.log(t('起始角度')) // 起始角度

i18n.changeLanguage('en-US') // 無(wú)需手動(dòng)調(diào)用
console.log(t('起始角度')) // start angle

i18n.changeLanguage('ja-JP') // 無(wú)需手動(dòng)調(diào)用
console.log(t('起始角度')) // 開(kāi)始角度

當(dāng)有拼接詞條時(shí), 可以通過(guò) t 函數(shù)第二個(gè)參數(shù)傳入。

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      '我的{{version}}{{item}}': 'my {{version}} {{item}}',
      '新': 'new',
      '手機(jī)': 'cellphone'
    },
  },
});

// 拼接 "新" "手機(jī)" 兩個(gè)詞條
console.log(t('我的{{version}}{{item}}', { item: t('手機(jī)'), version: t('新') })) // my new cellphone

一些語(yǔ)言在數(shù)量上會(huì)有單復(fù)數(shù)之分，為了處理這種情況，可以在resources中，為需要處理復(fù)數(shù)的詞條的 key 的末尾增加 _plural 后綴，代表復(fù)數(shù)形式的翻譯。

const { t, i18n } = I18n.init({
  resources: {
    'en-US': {
      '{{count}}個(gè)蘋(píng)果': '{{count}} apple', // 單數(shù)翻譯
      '{{count}}個(gè)蘋(píng)果_plural': '{{count}} apples', // 復(fù)數(shù)翻譯
    },
  },
});

console.log(t('{{count}}個(gè)蘋(píng)果', { count: 3 })) // 3 apples
console.log(t('{{count}}個(gè)蘋(píng)果', { count: 1 })) // 1 apple

在 Quick BI 中通常不需要手動(dòng)設(shè)置當(dāng)前語(yǔ)言，SDK已經(jīng)內(nèi)置識(shí)別當(dāng)前語(yǔ)言的邏輯。如果一定要獲取當(dāng)前語(yǔ)言，可以通過(guò)以下方式獲取。

const currentLang = window.globalConfig.currentLang

const currentLang = i18n.lng

Quick BI 提供了以下公共庫(kù)：

• react - 16.12.0
• react-dom - 16.12.0
• lodash - 4.17.20
• moment - 2.29.1

這些庫(kù)均已注入沙箱的全局變量之中，為了保證您的組件性能最佳，請(qǐng)優(yōu)先使用這些版本的公共庫(kù)。