与优化

云眼About 2 min

与优化

本主题介绍云眼灰度实验 React Native SDK 的高阶组件。withEyeofcloud

通过使用高阶组件(HoC)'withEyeofcloud,EyeofcloudProvider下的任何组件都可以访问Eyeofcloud灰度发布 ReactSDKClient,它公开了Eyeofcloud信息和API。

版本

SDK v2.2.0

描述

该组件提供对所有标准 SDK 方法(如 Decide 方法)的访问,如果不想使用 React 组件或钩子(如 useDecision)与 Eyeofcloud 交互。通过为包装的组件提供 prop,withEyeofcloud 高阶组件也使得使用这些标准 SDK 方法更加方便。withEyeofcloud``eyeofcloud

该对象会自动与传递给祖先 EyeofcloudProvider 的用户属性相关联。结果是,该用户对象的 id 和属性将自动转发到所有相应的 SDK 方法调用。因此,在使用后调用客户端对象的方法时,无需传递 userId 或属性参数,除非希望使用与提供给 EyeofcloudProvider 的 userId 或属性不同的属性。eyeofcloud``eyeofcloud``withEyeofcloud

参数

下表列出了 React Native SDK 的必需参数和可选参数。

参数

类型

描述

元件

React组件

将使用以下道具增强的组件

提供的道具

支柱

类型

描述

云眼

ReactSDKClient

传递给云眼提供程序的客户端对象

优化就绪超时

号码 |定义

传递给云眼提供程序的超时

is服务器端

布尔

传递给云眼提供程序的值

返回

带有附加道具的包装组件,如上所述

React

import { withEyeofcloud } from '@eyeofcloud/react-sdk' class MyComp extends React.Component { constructor(props) { super(props) const { eyeofcloud } = this.props const decision = eyeofcloud.decide('feat1') this.state = { decision.enabled, decision.variables, } } render() { } } const WrappedMyComponent = withEyeofcloud(MyComp)

跟踪(与优化一起使用)

React

import { Button } from 'react-native'; import { withEyeofcloud } from '@eyeofcloud/react-sdk'; class SignupButton extends React.Component { onPress = () => { const { eyeofcloud } = this.props eyeofcloud.onReady().then(() => { eyeofcloud.track('signup-clicked') }) // rest of click handler } render() { <Button onPress={this.onPress}> Signup </Button> } } const WrappedSignupButton = withEyeofcloud(SignupButton)

🚧 重要

如上所述,通过withEyeofcloud提供的客户端对象会自动与传递给祖先EyeofcloudProvider的用户属性相关联。调用 track 时无需传递 userId 或属性参数,除非希望使用与提供给 EyeofcloudProvider 的 userId 或属性不同的 userId 或属性。eyeofcloud

包含 React 实现的语言/平台源文件是 index.tsopen in new window

Last update:
Contributors: “zhangweixue”