反应|使用创建选择器传递Redux状态并隐藏菜单项

Question

在处理边栏的React组件中，我们将Menu Items设置为modules。我想从Redux传递特定状态，如果错误则隐藏特定项目。 我做到了，但是用componentWillRecieveProps将状态作为Props传递了。但是我需要特别使用createSelector中的reselect来做，因为componentWillRecieveProps将不推荐使用，并且我们开始使用越来越多的reselect。

问题是我不知道该怎么做。重新选择文档比提供帮助更令人困惑。 那么您能帮上忙吗？

组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { createSelector } from 'reselect';

import { isRouteActive } from './location';

class ModuleNavigation extends Component {
  static propTypes = {
    modules: PropTypes.array,
    user: PropTypes.object,
    currentRoute: PropTypes.string,
    isMinimized: PropTypes.bool,
    isItAvailable: PropTypes.bool,
  }

  state = {
    isOpen: false,
  }

  constructor(props) {
    super(props);

    this.topNavRef = React.createRef();
    this.bottomNavRef = React.createRef();
    this.moduleNavRef = React.createRef();
  }

  componentDidUpdate() {
    this.updateArrows();
  }

  componentDidMount() {
    this.updateArrows();
    window.addEventListener('resize', this.updateArrows);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateArrows);
  }

  onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  getRefId = (index) => {
    if (index === 0) return this.topNavRef;
    if (this.props.modules && index === this.props.modules.length - 1) return this.bottomNavRef;

    return null;
  }

  renderGroup = (group, index, user, currentRoute, isMinimized) => (
    <ul ref={this.getRefId(index)} key={group.name} className="module-navigation-group nav">
      {
        <li className={classNames('mt-10 mb-10 module-navigation-group-separator', { hidden: index === 0 })} />
      }
      {group.children
        .filter(mod =>
          mod.route && (!mod.permissions || userHasPermission(user, mod.permissions)))
        .map(mod =>
          (<li key={mod.name} className={classNames('module-navigation-group-item', { active: isRouteActive(currentRoute, mod.route) })}>
            <a href={(mod.parentApp ? '#' : '') + mod.route} target={mod.target} title={mod.name}>
              <i className={`fa ${mod.classNames} module-navigation-group-item-icon`} />
              {!isMinimized && <span className="hidden-xs hidden-sm ml-15 module-navigation-group-item-label">{mod.name}</span>}
            </a>
          </li>))}
    </ul>
  )

  render() {
    const {
      modules,
      currentRoute,
      user,
      isItAvailable,
    } = this.props;

    if (!user || !modules || !modules.length) return null;

    return (
      <div className={classNames('module-navigation-wrapper', { 'is-minimized': isMinimized })}>
        <div ref={this.moduleNavRef} isZKAvailable={isZKAvailable} className="module-navigation">
          {
            modules.map((group, index) =>
              this.renderGroup(group, index, user, currentRoute, isMinimized))
          }
        </div>
    );
  }
}

export default ModuleNavigation;

我想在此处将布尔值isItAvailable传递给名为modules的菜单项，并检查模块的子代是否有特定的子代。如果isItAvaialable =false不显示

Answer 1

您好，您需要对类组件进行少量重构，以便可以用from functools import reduce from operator import eq, gt, lt, and_ cond = lambda x: [reduce(and_, (op(x[c], x['{}-1'.format(c)]) for c in 'ABC')) for op in (eq, gt, lt)] 临时包装组件，并获取状态值并将其作为道具注入。

您需要在类组件中进行这些更改，以获取connect作为道具，例如isAvailable：

this.props.isAvailable

将// import connect hoc from react-redux import { connect } from 'react-redux' // import your selector from e.g. selectors.js, on the top import {getIsAvailable} from './selectors' // bottom, out of the class create the mapStateToProps function, // in order to get state values and inject them as props to the component const mapStateToProps = (state) => { return { isAvailable: getIsAvailable(state), } } // you export your component wrapped with the connect hoc, like so export default connect(mapStateToProps, null)(ModuleNavigation) 导入到选择器文件中，然后像这样使用reselect：

CreateSelecto

就这样。我希望这会有所帮助。