Access another component's method and have defaultProps for it - reactjs

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" />
}
}

Answer 1

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>
}
}