取得單一特性

import { useFeature } from 'ibm-appconfiguration-react-client-sdk';

const feature = useFeature('featureId'); // returns undefined incase the featureId is invalid or doesn't exist

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

取得所有特性

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

const features = useFeatures();
const feature = features['featureId'];

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

評估特性

您可以使用 feature.getCurrentValue(entityId, entityAttributes) 方法來評估特性旗標的值。 此方法會根據評估傳回其中一個「已啟用/已停用/已置換」值。 回覆值的資料類型符合特性旗標的資料類型。 傳遞唯一的 entityId 作為參數，以執行特性旗標評估。

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const feature = useFeature('featureId');
const featureValue = feature.getCurrentValue(entityId, entityAttributes);

其中：

• entityId: 實體的 ID。 這將是與評估特性所依據的實體相關的字串 ID。 例如，實體可能是在行動裝置上執行的應用程式的實例，或是存取 Web 應用程式的使用者。 對於與App Configuration互動的任何實體，它必須提供唯一的實體 ID。
• entityAttributes: JSON 物件，由定義指定實體的屬性名稱及其值組成。 如果特性旗標未配置任何目標定義，則這是選用參數。 如果已配置目標，則應該提供 entityAttributes 以進行規則評估。 屬性是用來定義區段的參數。 SDK 使用屬性值來判斷指定的實體是否滿足目標規則，並傳回適當的特性旗標值。

發送自訂指標

在實驗中使用 useTrack 掛鉤記錄自訂指標。

import { useTrack } from 'ibm-appconfiguration-react-client-sdk';

export default MyComponent = function () {
    const trackEvent = useTrack();
    return (
        <button onClick={() => trackEvent('clicked', 'user123')}>Buy</button>
    )
}

取得單一內容

import { useProperty } from 'ibm-appconfiguration-react-client-sdk';

const property = useProperty('propertyId'); // returns undefined incase the propertyId is invalid or doesn't exist

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

取得所有內容

import { useProperties } from 'ibm-appconfiguration-react-client-sdk';

const properties = useProperties();
const property = properties['propertyId'];

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

評估內容

使用 property.getCurrentValue(entityId, entityAttributes) 方法來評估內容的值。 此方法會根據評估傳回預設內容值或其置換值。 回覆值的資料類型符合內容的資料類型。

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const property = useProperty('propertyId');
const propertyValue = property.getCurrentValue(entityId, entityAttributes);

其中：

• entityId: 實體的 ID。 這將是與評估內容所依據的實體相關的字串 ID。 對於與App Configuration互動的任何實體，它必須提供唯一的實體 ID。
• entityAttributes: JSON 物件，由定義指定實體的屬性名稱及其值組成。 如果內容未配置任何目標定義，則這是選用參數。 如果已配置目標，則應該提供 entityAttributes 以進行規則評估。 屬性是用來定義區段的參數。 SDK 會使用屬性值來判斷指定的實體是否滿足目標規則，並傳回適當的內容值。

透過 React Client SDK 使用後備值

如果App Configuration發生連線錯誤，SDK 依賴記憶體中保留的最近評估的標誌值。 但是，如果記憶體中不存在先前值，建議使用者在程式碼中建立後備值，以確保順利運行。 下面的範例展示了這種後備方法。

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

export default function App {
  const features = useFeatures();
  const defaultFlagValues = {
    'flight-booking': false
  }
  const entityId = 'john_doe';
  const entityAttributes = {
    city: 'Bangalore',
    country: 'India',
  };

  const getAppConfigurationFlags = (featureID, features) => {
    if (Object.keys(features).length === 0 && features.constructor === Object) {
      return defaultFlagValues[featureID];
    }

    return feature[featureID]
      ? feature[featureID].getCurrentValue(entityId, entityAttributes)
      : defaultFlagValues[featureID];
  };

  return getAppConfigurationFlags('flight-booking', features) ? <div>Flight Booking</div> : '';
}