Reactjs 我如何扩展“a”；“已连接”；组件？

我的情况是，我有导航组件，它是基础，并且正在收听

导航

状态（Redux）。它应该扩展到水平导航和垂直导航，以便于将来重用代码

我的问题是，现在我已经有了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);

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;

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

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;

垂直导航将是相反的。舞台左右；物品的上下移动

---

我不想每次使用水平或垂直时都重复使用导航组件，并一遍又一遍地重写相同的精确逻辑。

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

为了实现这一点，您还可以导出类（除了底部的

导出默认连接（mapStateToProps）（导航）；

：

export class Navigation extends Component {

然后，要扩展它，您可以执行以下操作：

import { Navigation } from './Navigation';

class Horizontal extends Navigation {
  // ...

但是，您还需要连接

水平
组件，以便从redux获得正确的道具

如果您不想使用connect，可以将道具添加到导航组件中，以更改上/下/左/右操作的工作方式，然后可以创建一个水平/垂直组件，该组件通过右侧道具。类似于：

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

class.com组件{
构造函数（道具、上下文）{
超级（道具、背景）；
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（）{
返回(
);
}
);
我正在使用高阶组件模式，导出一个函数来连接扩展组件，例如：

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)

在Horizontal.jsx中，您可以

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

class Horizontal extends Navigation{
...

export default connect(Horizontal);

这样，您就可以将connect（mapStateToProps）保留在一个地方。
Hmm，我自己解决了这个问题，但是覆盖类的defaultProp没有传递给connect（…，ownProps）！非常疯狂！我用4只眼睛检查了代码中的所有内容。因此，有些可疑。其余的道具都可用。