Access another component's method and have defaultProps for it

Question

I'd like to access another component's userLogout function.

I have read this react-js-access-to-component-methods. However, the only way that seems to work for me is what follows.

Does anyone know another way that would be easier, shorter? My goal is to get all the logic out of Base component.

@azium pointed out that I'm using a derived class. The goal was initially to have access to static defaultProps so the problem was approached the wrong way.

class Funcs extends React.Component {
    // this is the derived class way I was hoping to have (much cleaner)
    static defaultProps = {
      text: 'hello'
    }
    constructor(props) {
        super(props);
    }

    userLogout() {
        console.log('userLogout');
    }

    render() {
        return null;
    }
}

class Base extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    MyWidget = (el, refCb) => {
        ReactDOM.render(<Funcs ref={refCb} />, el);
    };

    componentDidMount() {
        this.MyWidget(document.getElementById('nothing'), widget => {
            console.log('there you are...', widget);
            this.setState({
                widget
            });
            // works too
            this.widget = widget
        });
    }

    render() {
        console.log('widget', this.state.widget, this.widget);
            return <div id="nothing" />
    }
}

Why do you want to move all the logic out of Base component? What is your actual query? — Hemadri Dasari, Aug 25 '18 at 13:29
Isn't it better to do it in a less complex way, such as passing the function from a parent component to children components, or in a more proper way, like using redux? — Yossi, Aug 25 '18 at 13:30
To have my graphql mutations at one place (in Funcs) and stop getting them all over the place in the app. WDYT? In Express I see this quite often, to have all the db methods in one class. — aquiseb, Aug 25 '18 at 13:31
In your example... what is `Funcs` a component at all? Why not just a class you import and call its functions? — azium, Aug 25 '18 at 14:32
Good point, sorry I lost the initial goal while searching... I needed defaultProps. Having defaultProps defined, and `this.opts = Object.assign({}, defaultProps, props);` does the job. Thanks — aquiseb, Aug 25 '18 at 18:06

score 0 · Answer 1 · answered Aug 25 '18 at 18:51

Here's the solution to have defaultProps on a non derived class.

class Funcs {
    constructor(props) {
        this.props = Object.assign({}, this.defaultProps, props);
    }

    defaultProps = {
        userLogout: {
            onCompleted: () => this.props.nextRouter.pushRoute('home_v01', { lng: this.props.nextRouter.query.lng }),
            onError: err => console.log('An error occured, ', err)
        }
    };

    userLogout = () => {
        LogoutMutation.commit({
            environment: this.props.environment,
            onCompleted: this.props.userLogout.onCompleted,
            onError: this.props.userLogout.onError
        });
    };
}

class Base extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    funcs = new Funcs({
        environment: this.props.relay.environment,
        nextRouter: this.props.nextRouter,
        userLogout: {
            onCompleted: () => console.log('LOG OUT')
        }
    });

    render() {
        return <div onClick={this.funcs.userLogout}>Log out</div>
    }
}

Access another component's method and have defaultProps for it

1 Answers1