javascript - react |使用创建选择器传递 Redux 状态并隐藏菜单项

Question

在处理边栏的 React 组件中，我们有 Menu Items，作为 modules。我想从 Redux 传递一个特定的状态，并且在 false 的情况下隐藏一个特定的项目。我做到了，但是使用 componentWillRecieveProps 将状态作为 Props 传递。但我需要使用 reselect 中的 createSelector 来完成它，因为 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;

我想将 bool 值 isItAvailable 传递给此处称为 modules 的菜单项，并检查模块的子项以查找特定的模块。如果 isItAvaialable =false 不显示它

Answer 1

您好，您需要对您的类组件进行小规模重构，以便您可以使用 connect hoc 包装组件并获取状态值并将它们作为 Prop 注入(inject)。

在您的类组件中，您进行了这些更改，以便将 isAvailable 作为 prop，例如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，如下所示:

import { createSelector } from 'reselect'

// get the local state data.
// you are gonna change the structure based on yours
const getLocalState = state => state.data

// here with creteSelector:
// 1. call the localstate and return the data
// 2. get the data as param of an arrow func and 
// make whatever we like with the data (calcs, checks etc)
// and finally return the data we need.
export const getIsAvailable = createSelector(
  getLocalState,
  data => data.isAvailable || false
)

就是这样。希望对您有所帮助。