如何扩展“连接”组件？

IT技术 reactjs redux
2021-05-04 10:17:23

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

我的问题是，现在我已经有了 Navigation.jsx 的“最终”版本，我可以将它扩展为一个类，但不能覆盖它的方法。它触发 super(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);

水平.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组件，并一遍又一遍地重写完全相同的逻辑。

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) 保留在一个地方。

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

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

export class Navigation extends Component {

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

import { Navigation } from './Navigation';

class Horizontal extends Navigation {
  // ...

但是，您还需要连接Horizontal组件才能从 redux 中获得正确的 props。

如果您不想使用连接，则可以将props引入导航组件，以更改这些向上/向下/向左/向右操作的工作方式，然后您可以创建一个传入正确props的 Horizo​​ntal/Vertical 组件。就像是：

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} />
    );
  }
);
其它你可能感兴趣的问题
上一篇防止 React 捕获制表符 下一篇React/redux - 传递 actionCreators 多个层次