与云眼同行

本主题介绍高阶组件与云眼 .

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

版本

SDK v1.0.0

描述

如果不想使用 React 组件或钩子（例如 useDecision）与 Eyeofcloud灰度发布 进行交互，则该组件提供对所有标准 SDK 方法（例如 Decide 方法）的访问。通过为包装的组件提供 prop，高阶组件也使这些标准 SDK 方法的使用更加方便。withEyeofcloud``eyeofcloud``withEyeofcloud

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

参数

下表列出了 React 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 { withEyeofcloud } from '@eyeofcloud/react-sdk'  

class SignupButton extends React.Component {   
    onClick = () => {     
        const { eyeofcloud } = this.props     
        eyeofcloud.onReady().then(() => {       
            eyeofcloud.track('signup-clicked')     
        })     
        // rest of click handler   
    }    
    render() {     
        <button onClick={this.onClick}>       
        Signup     </button>   
    } 
}