Come usare l'ereditarietà con Reagire componenti e classi ES6

Question

Sto tentando di sottoclasse un componente Reagire, ed i miei metodi sostituiti non sono stati chiamati:

class Foo extends React.Component { 
    someMethod() { ... } 

    render() { 
    return <div>{this.someMethod()}</div>; 
    } 
} 

class Bar extends Foo { 
    someMethod() { 
    // Never gets called 
    } 
} 

Infatti, quando ho un rendering <Bar /> nel mio DOM e guarda il componente nel debugger, mostra il tipo di componente come 'Foo'.

(Inoltre, si ricorda che ho familiarità con tutti gli argomenti circa la composizione vs eredità. Fidati di me, l'eredità è davvero la risposta giusta per il mio specifico caso d'uso, quindi cerchiamo di non iniziare tale argomento.)

(Inoltre, so di potenziale problema duplicato #27233491, ma le soluzioni presentate non in realtà non sembrano funzionare per me.)

Aggiornamento:

vedo @ esempio di Aaron su CodePen che mostra come questo funziona, ma sto vedendo un comportamento diverso io n mia app. In particolare:

class Foo extends React.Component { 
    render() { 
    console.log(this); // Always prints 'Foo...'. 
    return <div></div> 
    } 
} 

class Bar extends Foo { 
    render() { 
    console.log(this); // Always prints 'Bar...'. 
    return super.render(); 
    } 
} 

Quello che vedo sulla console dev quando mi rendo Bar è:

> Bar { props: ...etc. } 
> Foo { props: ...etc. } 

In altre parole, il primo di registrazione stampe frase 'La presente' come di tipo bar, e la seconda uno stampa 'questo' come tipo Foo. Entrambi dalla stessa chiamata a render().

Answer 1

Trovato il problema: stavo usando withRouter() sulla classe base. Non puoi ereditare da un HoC, tratta tutti i metodi come se. Bind (questo) fosse stato chiamato su di essi.