与优化

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

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

版本

SDK v2.2.0

描述

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

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

参数

下表列出了 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.ts。