javascriptreactjsthis

What to pass instead of 'this' in React function components


I have a task to rewrite class component to function one in React. Here's the method that bothers me

    openDictionary = async () => {
        const {
            special,
            sysColumnName,
            label,
            listLabel,
            sysColumnId,
            columnId,
        } = this.model;
        const {
            match,
            location,
            listValue,
        } = this.props;
        const width = window.screen.width * .7;
        const height = window.screen.height * .7;
        const top = 0;
        const left = 0;
        window.editReferenceField = this; // This line!
        ...
    };

The line I marked as'This line!' sets to a global window object's field editReferenceField a class instance, which is a component itself. Logging it into the console gives me a real instance with all its methods etc.

The project I work on is quite big, and there're several places I could find where the window.editReferenceField is used to access the component's methods (and there're also many places which I couldn't find, I'm positive with that, because the app is very dynamic and allows user to add logic via scripts).

Is there a way to do something similar in the function components? Unfortunately, I can't know for sure which methods/fields will be accessed, so I can't just assign this editReferenceField to an object with chosen methods, I need to pass the whole thing.


Solution

    1. Anyway you need to find and note all the places where is editReferenceField used. Because you need to test all these places later;
    2. Then check and note all methods editReferenceField.???;
    3. Create the new functional component below and export all the props from p.2 window.editReferenceField = { someFunc: theFunc, otherFunc: theOtherFunc };
    4. One by one replace and test all components from p.1. If something wrong, use the class component to compare and note the difference, resolve them;
    5. Finally test all the places from p.1;
    6. Remove class component.

    If it's impossible, then just don't touch it for now.