获取单一功能

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: 实体的标识。 这将是与对功能进行求值的实体相关的字符串标识。 例如，实体可以是移动设备上运行的应用程序实例，也可以是访问网络应用程序的用户。 任何实体要与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: 实体的标识。 这将是与对属性求值的实体相关的字符串标识。 任何实体要与App Configuration 进行交互，都必须提供一个唯一的实体 ID。
• entityAttributes: 由属性名称及其用于定义指定实体的值组成的 JSON 对象。 如果属性未配置任何目标定义，那么这是可选参数。 如果配置了目标，那么应该为规则评估提供 entityAttributes。 属性是用于定义段的参数。 SDK 使用属性值来确定指定的实体是否满足目标规则，并返回相应的属性值。

使用 React 客户端 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> : '';
}