React / Redux从无关组件中删除“ active”

Question

我正在使用React-Photon套件来创建前端，尽管很棒，但确实为我带来了一些未知数。

具体来说，我有一个侧边栏导航<Photon.NavGroup> ，该边栏导航可在更改时动态绘制顶部导航栏。 这通过Redux / Thunk进行，并且依靠index值很好地工作。 当发生对NavGroupItem的onClick时，调度将更新商店，并且所有内容都会根据需要NavGroupItem 。

我在顶部导航栏中添加了一个永久的“ Home按钮，该按钮与边栏无关。 它从onClick调度index:0 ，这将导致加载所需的首页，并通过更新商店来重置顶部导航。

我很难理解的是更新（删除）当前所选NavGroupItem的class = 'active'的适当方法。

我看了很多文章，但它们都涉及到父母/孩子之间的现有关系。 在这种情况下不存在（表兄弟？）

我可能会在React之外将其作为...

const els: any = document.getElementsByClassName('active');
  if (els != null) {
    [...els].forEach(el => {
      el.getAttribute('class').replace('active', '');
    });
  }

但我想留在框架内。

我的侧边栏看起来像：

// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import * as Photon from '../vendor/photon';

/** Thunk actions */
import updateSidebar from '../actions/sidebar-actions';

/** Action Type Constant */
import { UPDATE_SIDEBAR_INDEX } from '../constants/ActionTypes';

class Sidebar extends Component {
  onSelect: Function
  state: {
    index: number
  }

  action: {
    type: string,
    index: number
  }

  constructor(props: Object) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.state = {
      index: 0
    };
  }

  onSelect(index: number) {
    this.setState(() => ({
      index
    }));

    const setNav = () => {
      switch (index) {
        case 1:
          return '/Dashboard';
        case 2:
          return '/Logistics';
        case 3:
          return '/Operations';
        case 4:
          return '/Reporting';
        case 5:
          return '/Transactions';
        default:
          return null;
      }
    };

    this.action = {
      type: UPDATE_SIDEBAR_INDEX,
      index
    };
    this.props.updateSidebar(UPDATE_SIDEBAR_INDEX, this.state, this.action);
    this.props.navigateTo(setNav());
  }

  render() {
    return (
      <Photon.Pane ptSize="sm" sidebar>
        <Photon.NavGroup onSelect={this.onSelect.bind(this)} >
          <Photon.NavGroupItem eventKey={1} glyph="gauge" text="Dashboard" />
          <Photon.NavGroupItem eventKey={2} glyph="globe" text="Logistics" />
          <Photon.NavGroupItem eventKey={3} glyph="cog" text="Operations" />
          <Photon.NavGroupItem eventKey={4} glyph="print" text="Reporting" />
          <Photon.NavGroupItem eventKey={5} glyph="publish" text="Transactions" />
        </Photon.NavGroup>
      </Photon.Pane >
    );
  }
}

const mapDispatchToProps = (dispatch: *) => ({
  updateSidebar: (type, state, action) => dispatch(updateSidebar(type, state, action)),
  navigateTo: (path: string) => dispatch(push(path))
});

export default connect(null, mapDispatchToProps)(Sidebar);

Answer 1

用这个：

[...els].forEach(el => {
  el.classList.remove('active');
});

注意：这不适用于IE <10，您可以使用jquery并使用$(el).removeClass('active')