当函数作为prop传递时调用带有酶的函数-React

本文介绍了当函数作为prop传递时调用带有酶的函数-React的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个说 onClickOfCreateAccountButton 的函数，单击该函数后，我的子组件会调用它，但逻辑会写在父组件中。 我如何模拟它？ 我的代码： onClickOfCreateAccountButton（）{ const el = document.getElementsByClassName（'SignInSlider-loginSlider'）[0]; const el1 = document.getElementsByClassName（’SignInSlider-createAccountSlider’）[0]; el.classList.add（'SignInSlider-animate-show'）; el.classList.remove（’SignInSlider-animate-hide’）; setTimeout（（）=> { this.props.signInSliderActions.openCreateAccountPage（）; el1.classList.add（'SignInSlider-animate-show'）; } ，5）; } return（< SlidePanel isOpenPanel = {this.props.isOpenPanel} onClosePanel = {！hideBackArrowCloseButton& & this.onBackButtonClick} onPrimaryCloseButtonClick = {this.onPrimaryCloseButtonClick} panelTitle = {！hideBackArrowCloseButton&&返回登录} hideBackArrowCloseButton = {hideBackArrowCloseButton} isPrimaryCloseButtonRequired> < div className = {cx（'signInSliderPanel'）}> < div className = {cx（'loginSlider'）}}> {！showCreateAccountPage&！showWelcomePage&&！showForgotPasswordPage&& < LoginWrapper signInDetails = {signInDetails} deviceType = {deviceType} preferences = {preferences} 条消息ts = {messagesTexts} source = account actions = {this.props.signInActions} onClickOfCreateAccountButton = {this.onClickOfCreateAccountButton} onClickPasswordReset = {this.onClickPasswordReset} isSignInSliderReq /> } < / div> < div className = {cx（’createAccountSlider'）}> {showCreateAccountPage& < CreateAccountWrapper createAccount = {createAccount} isSignInSliderReq deviceType = {deviceType} messagesTexts = {this.props.messagesTexts} preferences = { this.props.preferences} actions = {this.props.createAccountActions} /> }< / div> < div className = {cx（’passwordSlider'）}> {showForgotPasswordPage& < PasswordResetWrapper isSignInSliderReq messagesTexts = {messagesTexts.passwordReset} 首选项= {preferences} createAccountActions = {this.props.createAccountActions} 操作= {this.props.passwordResetActions} passwordResetDetails = {passwordResetDetails} signInSliderActions = {this.props.signInSliderActions} onPrimaryCloseButtonClick = {this.onPrimaryCloseButtonClick} 设备类型 />}< / div> < div className = {cx（’welcomeSlider’）}> {showWelcomePage&& <欢迎 messagesTexts = {messagesTexts.signInSlider} firstName = {firstName} />}< / div> < / div> < / SlidePanel> ）; 覆盖范围： 解决方案您可以尝试以下操作： const组件=浅（< YourComponent />）; component.find（'LoginWrapper'）。prop（'onClickOfCreateAccountButton' ）（）; 这将调用onClickOfCreateAccountButton函数，然后您可以使用Expect测试结果。 I have a function say onClickOfCreateAccountButton which is being called from my Child Component on click of a button but the logic is written in the Parent Component.How do I simulate it?My code: onClickOfCreateAccountButton() { const el = document.getElementsByClassName('SignInSlider-loginSlider')[0]; const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0]; el.classList.add('SignInSlider-animate-show'); el.classList.remove('SignInSlider-animate-hide'); setTimeout(() => { this.props.signInSliderActions.openCreateAccountPage(); el1.classList.add('SignInSlider-animate-show'); }, 5);}return ( <SlidePanel isOpenPanel={this.props.isOpenPanel} onClosePanel={!hideBackArrowCloseButton && this.onBackButtonClick} onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick} panelTitle={!hideBackArrowCloseButton && 'Back to Sign-In'} hideBackArrowCloseButton={hideBackArrowCloseButton} isPrimaryCloseButtonRequired> <div className={cx('signInSliderPanel')}> <div className={cx('loginSlider')}> { !showCreateAccountPage && !showWelcomePage && !showForgotPasswordPage && <LoginWrapper signInDetails={signInDetails} deviceType={deviceType} preferences={preferences} messagesTexts={messagesTexts} source="account" actions={this.props.signInActions} onClickOfCreateAccountButton={this.onClickOfCreateAccountButton} onClickPasswordReset={this.onClickPasswordReset} isSignInSliderReq /> } </div> <div className={cx('createAccountSlider')}> {showCreateAccountPage && <CreateAccountWrapper createAccount={createAccount} isSignInSliderReq deviceType={deviceType} messagesTexts={this.props.messagesTexts} preferences={this.props.preferences} actions={this.props.createAccountActions}/> } </div> <div className={cx('passwordSlider')}> {showForgotPasswordPage && <PasswordResetWrapper isSignInSliderReq messagesTexts={messagesTexts.passwordReset} preferences={preferences} createAccountActions={this.props.createAccountActions} actions={this.props.passwordResetActions} passwordResetDetails={passwordResetDetails} signInSliderActions={this.props.signInSliderActions} onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick} deviceType />} </div> <div className={cx('welcomeSlider')}> { showWelcomePage && <Welcome messagesTexts={messagesTexts.signInSlider} firstName={firstName} />} </div> </div> </SlidePanel> );Coverage: 解决方案 You can try this:const component = shallow(<YourComponent /> );component.find('LoginWrapper').prop('onClickOfCreateAccountButton')();This will call your onClickOfCreateAccountButton function and then you can use expect to test result. 这篇关于当函数作为prop传递时调用带有酶的函数-React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！