javascript - 如何导出多个类方法

Question

我有几个方法可以返回我希望能够从类外部调用的 jsx 对象，目前，我发现唯一可行的方法是在同一个文件中从类外部导出箭头函数，但我最终在类里面有太多的功能。

那么有没有一种方法可以从同一个文件中导出多个类方法并保存在类中呢？

我不想为这些函数中的每一个都创建一个新类，因为它们是相关的，我需要将它们从类中调用出来，这样我才能将它们添加到 Storybook 中。

我想要的例子:

//A.js 
class A{
  export foo() {return (<div>...</div>)}
  export bar() {...}
}

export default A

我现在所拥有的:

//A.js 
export default class A{
...
}
export const foo = () => {...}
export const bar= () => {...}

Answer 1

如果您的方法不依赖于它自己的属性或变量(使用 this 访问)，您可能想尝试使用 static 方法

export default class A {
  static foo() {return (<div>...</div>)}
  static bar() {...}
  ...
}

然后，您可以像这样使用它:

import A from './A';

A.foo();

使用静态方法的好处是你不需要创建一个实例来使用它。而且，它不会在您创建新实例时重新创建。

引用: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

现场演示:

class A {  
  static foo() {
    return "foo() called";
  }
  
  static bar() {
    console.log(this.foo() + " from bar()");
  }
}

class B {
  constructor() {
    A.bar();
  }
}

new B();