如何在函数上实现类方法或在类上实现函数构造函数方法?

时间:2019-07-06 06:19:54

标签: javascript reactjs

这甚至可能吗?我处在一种情况下,我不知道该使用什么或最好使用什么。我想要一个类似import { Component } from '@angular/core'; import { Platform } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AlertController } from '@ionic/angular'; import { PickerController } from '@ionic/angular'; export interface PickerOptions { buttons?: any[]; columns?: any[]; cssClass?: string; mode?: string; enableBackdropDismiss?: boolean; } @Component({ selector: 'app-root', templateUrl: 'app.component.html' }) export class AppComponent { horaSeleccionada:any; constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private alertCtrl:AlertController, private picker:PickerController ) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); this.selectHora(); }); } async selectHora() { const times: PickerOptions = { cssClass: 'horasSelect', buttons: [ { text: 'Cancelar', role: 'cancel', cssClass: 'btnCancel' }, { text: 'Confirmar', handler: (value) => { this.horaSeleccionada=value; console.log('confirmacion', this.horaSeleccionada); this.confirmacion(value); } } ], columns: [ { name: 'Horas', options: [ {text: '8:00 - 9:00', value: 1}, {text: '9:00 - 10:00', value: 2}, {text: '10:00 - 11:00', value: 3}, {text: '11:00 - 12:00', value: 4}, {text: '12:00 - 13:00', value: 5}, {text: '13:00 - 14:00', value: 6}, {text: '14:00 - 15:00', value: 7}, {text: '15:00 - 16:00', value: 8}, {text: '16:00 - 17:00', value: 9}, {text: '17:00 - 18:00', value: 10} ] } ] }; const picker = await this.picker.create(times); picker.present(); picker.onDidDismiss().then(async data => { const col = await picker.getColumn('Horas'); console.log('Esta es la columna ', col); this.horaSeleccionada = col.options[col.selectedIndex].value; console.log(this.horaSeleccionada); // this.confirmacion(); }); } async confirmacion(value) { const alert = await this.alertCtrl.create({ header: 'Confirmación Pedido', subHeader: 'Si desea cambiar la hora, seleccione cancelar', message: 'Su pedido será entregado entre las ' + value, buttons: [ { text: 'OK', handler: () => { console.log('ok texto', this.horaSeleccionada); // this.router.navigateByUrl('/orderfinished'); } } ], }); } } 的类,它将包含字符串的方法。我使用的是react js,在我的项目中,我有StringHelpers并扩展到class,并且我也有无状态函数。现在,我如何在两个方法上都使用Component class方法。

目前我的StringHelpers,我知道该怎么做。

StringHelpers

我将能够实现:

class StringHelpers {
  constructor(string) {
    this.string = string;
  }

  toUcfirst() {
    return "ucfirst executing";
  }
}

export default StringHelpers;

在类和无状态函数中..我如何实现这样的目标..或者我也可以适应其他有效的方法。

1 个答案:

答案 0 :(得分:4)

您可以简单地从stringHelpers导出函数,而不是将其设为类,然后在需要的地方导入这些函数

//stringHelpers.js

export function capitalizeFirstChar(str){
   return str && str.replace(/^[a-z]/, (match)=> match.toUpperCase()) || ''
}

// test.js

import {capitalizeFirstChar} from './stringHelpers.js'
console.log(capitalizeFirstChar('hello world'))