如何扩展"连接"组件？

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将是相反的.左右为舞台; 上下物品.

每次我都可以使用Horizo​​ntal或Vertical时,我不想重复使用Navigation组件,并且一遍又一遍地重写相同的逻辑.

Answer 1

我正在使用高阶组件模式,导出一个函数来连接扩展组件,例如:

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)保存在一个位置.

Answer 2

这是一个有趣的.在导航的底部,您将导出连接组件,实际上是导出在connect中创建的类,该类与Navigation不同.因此,当您扩展默认导出类时,实际上是扩展了连接类.那是满口的.

要使其正常工作,您还可以导出您的课程(除了export default connect(mapStateToProps)(Navigation);底部:

export class Navigation extends Component {

然后扩展它,你可以做:

import { Navigation } from './Navigation';

class Horizontal extends Navigation {
  // ...

但是,您还需要连接Horizontal组件,以便从redux获取正确的道具.

如果您不想使用连接,则可以在导航组件中添加道具,以更改上/下/左/右操作的工作方式,然后您可以创建一个传递右侧道具的水平/垂直组件.就像是:

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