Question

我正在使用React-Photon工具包来创建一个前端，虽然很棒但它确实为我提供了一些未知数。

具体来说，我有一个侧边栏导航<Photon.NavGroup>，可以在更改时动态绘制顶部导航栏。这通过Redux / Thunk运行良好，依赖于index值。当onClick发生NavGroupItem时，调度会更新商店，所有内容都会根据需要重新呈现。

我在顶部导航栏中添加了一个持久Home按钮，与侧边栏无关。它从index:0发送onClick，这会导致所需主页的加载，并通过更新商店重置顶部导航。

我难以理解的是更新（删除）当前所选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＆lt; 10，您可以使用jquery并使用$(el).removeClass('active')

React / Redux删除＆＃39; active＆＃39;来自非相关组件

1 个答案: