React Hooks 可以有方法吗？

Question

如何编写一个 React Hooks function 来export default导出方法？

我在任何地方都没有看到示例，所以我怀疑 React Hooks 不能以这种方式工作，但是......我很好奇是否可以扩展钩子 function 以导出子方法。

---

Checkout.js：

import React from "react";

function Checkout() {
  return <section className="checkout"></section>;
}

// Add Item Method
Checkout.addItemPrice = (item, price) => {
  console.log("this is a method");
};

export default Checkout;

Checkout.test.js：

import React from "react";
import ReactDOM from "react-dom";
import Checkout from "./Checkout";

describe("Checkout Test Suite", () => {
    it("Can add an item", () => {
        var checkout = new Checkout();
        checkout.addItemPrice('a', 1);
    });
});

---

类型错误：checkout.addItemPrice 不是 function

我一直无法在 Hooks 中找到一种方法来编写它，但最终，我将它们拆分为 2 个函数，2 个导出和 2 个导入。

Answer 1

与钩子无关。 如果您希望new Checkout()实例具有addItemPrice方法，则应将其添加到原型中：

Checkout.prototype.addItemPrice = (item, price) => {

Answer 2

当你执行：

var checkout = new Checkout();

无论是否使用New关键字，reactComponent 类型的reactComponent都会返回到checkout变量。 此 object 没有您尝试调用的方法。 您可以尝试使用此 object（reactComponent）的prorotype链定义您的方法，但此 object 可能会受到保护，不会受到任何更改。

即使您设法为reactComponet设置方法，这也不是一件好事，当然也不是 React 做事的方式。