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.