"接続された"コンポーネントをどのように拡張できますか？

Question

私の状況は、ナビゲーションコンポーネントがあり、ベースであり、Navigationsの状態（Redux）を聞いています。これは、将来再利用可能なコードのためにHorizo​​ntalNavigationとVerticalNavigationに拡張する必要があります。

私の問題は、今はNavigation.jsxの「最終版」がすでにあります。クラスとして拡張できますが、メソッドをオーバーライドできません。これは、スーパー（ナビゲーション）メソッドをトリガーし、最後のメソッドはトリガーしません。私は、水平または垂直コンポーネントのメソッドをオーバーライドする必要があります。

コンソールにコードエラーはありませんので、何か壊れているわけではありませんが、どのようにそれを拡張するのかわかりません。

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); 

Horizo​​ntal.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; 

VerticalNavigationは反対であろう。ステージの左右。アイテムの上下。

私はナビゲーションコンポーネント私は水平または垂直を使用して、何度も何度も同じ正確なロジックを書き換えることができ、それぞれの時間を再利用する必要はありません。

Answer 1

これは楽しいものです。 Navigationの下部では、接続コンポーネントをエクスポートしています。これは、本質的には、接続で作成されたクラスであり、Navigationと同じクラスではありません。したがって、デフォルトのエクスポートされたクラスを拡張すると、実際には接続クラスが拡張されます。それは一口です。

この作業を取得するために、あなたはまた、下部のexport default connect(mapStateToProps)(Navigation);に加えて、（自分のクラスをエクスポートすることもできます

export class Navigation extends Component { 

を次にそれを拡張するために、あなたが行うことができます：

import { Navigation } from './Navigation'; 

class Horizontal extends Navigation { 
    // ... 

しかし、あなたはまた、Horizontalコンポーネントを接続して、reduxから適切な小道具を入手する必要があります。

接続を使用したくない場合は、プロこれらのアップ/ダウン/左/右のアクションがどのように動作するかを変更するナビゲーションコンポーネントにpsを適用すると、右の小道を通過する水平/垂直コンポーネントを作成できます。ような何か：

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} /> 
    ); 
    } 
); 

Answer 2

私は例えば、拡張コンポーネントを接続するための機能をエクスポートし、高次コンポーネントパターンを使用しています：

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) 

そしてHorizo​​ntal.jsxにあなたが

を行うことができます

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

class Horizontal extends Navigation{ 
... 

export default connect(Horizontal); 

このようにして、connect（mapStateToProps）を1か所に保持します。