Question

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

我的问题是，现在我已经拥有了＃34; final＆＃34; Navigation.jsx的版本，我可以作为一个类扩展它，但不能覆盖它的方法。它触发超级（导航）方法而不是最终方法。我需要覆盖水平或垂直组件中的方法。

控制台上没有代码错误，所以它不会破坏，但我不知道如何处理它。

Navigation.jsx

Navigations

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

VerticalNavigation 将是相反的。左右为舞台;上下物品。

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

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)

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

如何扩展连接＆＃34;零件？

2 个答案: