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();

使用静态方法的优点是您不需要创建实例来使用它。并且，在创建新实例时不会重新创建它。

参考： 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();

如何导出多个类方法

2 个答案: