我怎样才能扩展“连接"?成分? [英] How can I extend a "connected" component?

问题描述

我的情况是，我有 Navigation 组件，它是基础，并且正在监听 Navigations 状态 (Redux).它应该扩展到 Horizo​​ntalNavigation 和 VerticalNavigation，以便将来轻松重用代码.

My situation is, I have the Navigation component, which is the base, and is listening to the Navigations state(Redux). It should be extended to HorizontalNavigation and VerticalNavigation, for easy reusable code in the future.

我的问题是，现在我已经有了 Navigation.jsx 的最终"版本，我可以将它扩展为一个类，但不能覆盖它的方法.它触发 super(Navigation) 方法而不是最后一个.我需要覆盖水平或垂直组件中的方法.

My problem is, right now I already have the "final" version of Navigation.jsx and I can extend it, as a class, but can't override it's methods. It triggers the super(Navigation) method and not the final one. I need to override the methods in Horizontal or Vertical components.

控制台上没有代码错误，所以它不是破坏性的，但我不知道如何处理如何扩展它.

There is no code erros on console, so it isn't something breaking, but that I don't know how to handle how to extend it.

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 则相反.左右为舞台；上下项目.

The VerticalNavigation would be the opposite. Left and right for stage; up and down for items.

我不想在每次可以使用 Horizo​​ntal 或 Vertical 时重复使用 Navigation 组件，并重写完全相同的逻辑一遍又一遍.

I don't want to reuse the Navigation component each time I could use Horizontal or Vertical, and rewrite the same exact logic over and over again.

推荐答案

这是一个有趣的方案.在Navigation的最底层，是导出connection组件，本质上是导出connect中创建的类，和Navigation不是同一个类.因此，当您扩展默认导出类时，实际上是在扩展连接类.这是一口.

This is a fun one. At the bottom of Navigation, you're exporting the connecting component, which in essence is exporting the class created in connect, which is not the same class as Navigation. So, when you extend the default exported class, you're actually extending the connect class. That's a mouthful.

为了让它工作，你还可以导出你的类(除了 export default connect(mapStateToProps)(Navigation); 在底部:

To get this to work, you could also export your class (in addition to export default connect(mapStateToProps)(Navigation); at the bottom:

export class Navigation extends Component {

然后扩展它，你可以这样做:

Then to extend it, you can do:

import { Navigation } from './Navigation';

class Horizontal extends Navigation {
  // ...

但是，您还需要连接 Horizo​​ntal 组件，以便从 redux 中获取正确的 props.

However, you would also need connect the Horizontal component as well in order to get the right props from redux.

如果您不想使用连接，您可以将道具添加到您的导航组件中，以更改这些上/下/左/右操作的工作方式，然后您可以创建一个传入右侧的 Horizo​​ntal/Vertical 组件道具.类似的东西:

If you don't want to use connect, you could take in props to your Navigation component that changes how those up/down/left/right actions work, then you could create a Horizontal/Vertical component that passes in the right props. Something like:

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

这篇关于我怎样才能扩展“连接"?成分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！