2017-03-13 23 views
2

Meine Situation ist, ich habe die Navigation Komponente, die die Basis ist, und hört den Navigations Zustand (Redux). Es sollte erweitert werden auf HorizontalNavigation und VerticalNavigation, für einfache wiederverwendbare Code in der Zukunft.Wie kann ich eine "verbundene" Komponente erweitern?

Mein Problem ist, jetzt habe ich bereits die "finale" Version von Navigation.jsx und ich kann es als eine Klasse erweitern, aber kann nicht seine Methoden überschreiben. Es löst die Super (Navigation) Methode aus und nicht die letzte. Ich muss die Methoden in den horizontalen oder vertikalen Komponenten überschreiben.

Es gibt keine Code-Fehler auf der Konsole, es ist also nicht etwas kaputt, aber ich weiß nicht, wie man damit umgehen soll.

Navigation.jsx

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import { connect } from 'react-redux'; 

import { itemAction, stageAction } from 'Store/Actions/Actions'; 

class Navigation extends Component { 
    // ACTIONS 
    leftAction() { 
     this.onLeftAction(); 
    } 
    onLeftAction() {} 

    rightAction() { 
     this.onRightAction(); 
    } 
    onRightAction() {} 

    downAction() { 
     this.onDownAction(); 
    } 
    onDownAction() {} 

    upAction() { 
     this.onUpAction(); 
    } 
    onUpAction() {} 

    // STAGES 
    nextStage (slug) { 
     this.goToStage(slug); 
    } 

    previousStage (slug) { 
     this.goToStage(slug); 
    } 

    goToStage (slug) { 
     // Just for illustration purpose 
     // let { dispatch } = this.props; 
     // dispatch(stageAction(slug)); 
    } 

    // ITEMS 
    nextItem (index) { 
     this.goToItem(index); 
    } 

    previousItem (index) { 
     this.goToItem(index); 
    } 

    goToItem (index) { 
     // Just for illustration purpose 
     // let { dispatch } = this.props; 
     // dispatch(itemAction(index)); 
    } 

    render() { 
     return(); 
    } 
} 

function mapStateToProps (state, props) { 
    navigation: state.Navigations[props.slug] 
} 

export default connect(mapStateToProps)(Navigation); 

Horizontal.jsx

import React from 'react'; 
import Navigation from 'Components/Navigation/Navigation'; 

class HorizontalNavigation extends Navigation { 
    onLeftAction (previousItemIndex) { 
     this.previousItem(previousItemIndex); 
    } 

    onRightAction (nextItemIndex) { 
     this.nextItem(nextItemIndex); 
    } 

    onTopAction (slug) { 
     this.previousStage(slug); 
    } 

    onDownAction (slug) { 
     this.nextStage(slug); 
    } 
} 

export default HorizontalNavigation; 

Die VerticalNavigation würde das Gegenteil der Fall sein. Links und rechts für die Bühne; rauf und runter für Gegenstände.

Ich will nicht die Navigation Komponente jedes Mal wieder zu verwenden I Horizontal oder Vertikale und umschreiben exakt die gleiche Logik immer und immer wieder verwenden konnte.

Antwort

5

Dies ist ein Spaß. Am Ende von Navigation exportieren Sie die verbindende Komponente, die im Wesentlichen die in connect erstellte Klasse exportiert, die nicht dieselbe Klasse wie Navigation hat. Wenn Sie also die exportierte Standardklasse erweitern, erweitern Sie eigentlich die connect-Klasse. Das ist ein Bissen.

Um diese an die Arbeit, können Sie auch Ihre Klasse exportieren (zusätzlich zu export default connect(mapStateToProps)(Navigation); am Boden:

export class Navigation extends Component { 

Dann ist es zu verlängern, die Sie tun können:

import { Navigation } from './Navigation'; 

class Horizontal extends Navigation { 
    // ... 

jedoch Sie müssten auch die Horizontal Komponente anschließen, um die richtigen Stützen von redux zu erhalten

Wenn Sie nicht verbinden möchten, konnten Sie in Pro nehmen ps zu Ihrer Navigationskomponente, die ändert, wie diese hoch/runter/links/rechts Aktionen funktionieren, dann könnten Sie eine horizontale/vertikale Komponente erstellen, die die richtigen Requisiten übergibt. Etwas wie:

class Horizontal extends React.Component { 
    constructor(props, context) { 
    super(props, context); 

    this.onUp = this.onUp.bind(this); 
    this.onDown = this.onDown.bind(this); 
    this.onLeft = this.onLeft.bind(this); 
    this.onRight = this.onRight.bind(this); 
    } 
    onUp() {} 
    onDown() {} 
    onLeft() {} 
    onRight() {} 
    render() { 
    return (
     <Navigation onUp={this.onUp} onDown={this.onDown} onLeft={this.onLeft} onRight={this.onRight} /> 
    ); 
    } 
); 
3

Ich bin mit dem Higher-Order-Komponente Muster, eine Funktion Export der erweiterten Komponente zu verbinden, zB:

import { connect as reduxConnect } from 'react-redux' 
... 

export class Navigation extends Component{ 
... 

export function connect(Component){ 
    return reduxConnect(
    (state, props)=>({...}) 
)(Component); 
} 

export default connect(Navigation) 

Und im Horizontal.jsx könnten Sie tun

import { Navigation, connect } from './Navigation'; 

class Horizontal extends Navigation{ 
... 

export default connect(Horizontal); 

Auf diese Weise behalten Sie die Verbindung (mapStateToProps) an einem Ort.

Verwandte Themen