如何导出多个类方法

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

您不需要导出类方法。只需创建该类的一个实例并调用它们：

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

export default A

A在其他文件中导入类：

import A from './A'

// create instance of class A
const a = new A()

// ... and call your methods on instance `a`
a.foo()
a.bar()

Answer 2

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

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

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

import A from './A';

A.foo();

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

现场演示：

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