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

Question

I am trying to convert class component to functional component, but having a trouble calling method 'resize' of child component 'Dog.js'

1. App.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. Dog.js

function Dog(color, speed, total) {

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

}
export default Dog;

please let me know how to use the 'resize' method of Dog.js in App.js, or what i need to change in my code structure. (or just keeping the structure of class component is better?)

Answer 1

To call resize Dog.js method from App.js you need to change Dog function like this:

function Dog(color, speed, total) {

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

}
export default Dog;