如何在 React 中存储函数

Question

I wrote a function that checks the width of the window (for keeping a component responsive):

  handleResize = () => this.setState({ windowWidth: window.innerWidth });
  handleEvent = () => window.addEventListener("resize", this.handleResize);

  componentDidMount = () => this.handleEvent();
  componentWillUnmount = () => this.handleEvent();

In case I want to reuse this code in other files, is there any way I can save this code and just reuse it everywhere I want?

Answer 1

Best way to do is using helpers. You can create a simple file, say helpers.js and place somewhere inside the src folder. It should contain something like this:

export const HandleResize = callBack => window.addEventListener("resize", callBack);

In this above code, I have given a callBack parameter, because you're trying to access the state of the component that calls it. So you'll be sending it from the component.

And you can use it on your other files something like this way:

import React from "React";
import { HandleResize } from "../helpers";

Answer 2

You can use helper functions like Praveen Kumar Purushothaman mentioned but in this case you probably want to use CSS media queries for it. Have a look into CSS modules. Also, your this might not refer to what you think you are referring when using an arrow function, if you still want to use this prefer to use the normal function defintion: function () {...} .