在非反应组件中调用App的forceUpdate而不将App作为属性传递

Question

I have a module which is not a react component (let's call it A) but its variables get displayed by react. Now A has to call the forceUpdate function of App.js. But I don't want to pass always App.js as a property when I create a new object of A.

I've created following:

App.js:

let forceUpdateCaller;

export default class App extends React.Component {

    static forceUpdate = () => {
        if (forceUpdateCaller) {
            forceUpdateCaller();
        }
    }

    forceUpdateCaller = () => {
        this.forceUpdate();
    }

    constructor(props) {
        super(props);        

        forceUpdateCaller = this.forceUpdateCaller;
    }

    ...

}

A:

import App from "../App";

export default class A extends ...{

    constructor() {
        super();
    }

    updateContent = () => {

        ...

        App.forceUpdate();
    }
}

But I'm sure, there's a better, cleaner way. Do you have any ideas?

Answer 1

Found the best way:

export let ref;

class App extend React.Component{
    constructor(props){
        super(props);
        ref = this;
    }
}

Now I have full access to the App object when I import {ref} . :)