将class组件改成功能组件：使用方法

Question

我正在尝试将 class 组件转换为功能组件，但在调用子组件“Dog.js”的方法“调整大小”时遇到问题

1. 应用程序.js

function App(props) {
  useEffect(() => {
    const dogs = [
      new Dog("#fff", 1, 2)
    ]

    dogs[0].resize(stageWidth, stageHeight) // here is what I want to perform - now it is undefined

   },[])
 ...
 }

2. 狗.js

function Dog(color, speed, total) {

  Dog.resize = (stageWidth, stageHeight) => {
      const gap = Math.ceil(stageWidth / (this.total - 2));
      ...
  };

}
export default Dog;

请让我知道如何在 App.js 中使用 Dog.js 的“resize”方法，或者我需要在我的代码结构中进行哪些更改。 （或者只保留 class 组件的结构更好？）

Answer 1

要从 App.js 调用 resize Dog.js 方法，您需要像这样更改 Dog function：

function Dog(color, speed, total) {

  this.resize = (stageWidth, stageHeight) => {
      const gap = Math.ceil(stageWidth / (this.total - 2));
      ...
  };

}
export default Dog;