Question

我将redux添加到create-react-app，并且我一直在尝试使导航器正常工作。我通过突出显示活动的“页面链接”来做到这一点。我为此使用的代码是react挂钩（使用状态来记住当前页面）和npm包classNames的组合。

classNames（object ['key'] && classes.activeItem）

因此，在激活该特定项目时，我在这里让object ['key']评估为true，以便该项目获得activeItem类。

当我用true替换object ['key']时，它可以工作。当我单击console.log对象['key']后，它的计算结果也为true。

为什么这不起作用？谢谢！

import React, { useEffect, memo } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import { loadPage } from './actions';
import { uploadFile } from '../uploadFile/actions';
import _ from 'lodash';


const styles = theme => ({
  item: {
    paddingTop: 4,
    paddingBottom: 4,
    color: 'rgba(255, 255, 255, 0.7)',
    '&:hover': {
      backgroundColor: 'rgba(255, 255, 255, 0.08)',
    },
  },
  itemPrimary: {
    color: 'inherit',
    fontSize: theme.typography.fontSize,
    '&$textDense': {
      fontSize: theme.typography.fontSize,
    },
  },
  itemActiveItem: {
    color: '#4fc3f7',
  },
  textDense: {}
});

function Navigator(props) {
  const { classes, curPage, onUploadFile, onPageChange, dispatch, ...other } = props;

  let activePage = {
    'invite': false,
  }

  useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
    activePage = _.mapValues(activePage, () => false);
    activePage[curPage] = true
  });


  return (
    <Drawer variant="permanent" {...other}>
      <List disablePadding>
        <ListItem button className={classNames(classes.logo)}>
          <img src={require("assets/img/logo.png")} alt={''}/>
        </ListItem>

        <ListItem className={classes.categoryHeader} >
          <ListItemText classes={{ primary: classes.categoryHeaderPrimary }}>
            Files
          </ListItemText>
        </ListItem>

        <ListItem
          button
          dense
          className={classNames(classes.item, activePage['invite'] && classes.itemActiveItem)}
          onClick={() => {onPageChange('invite')}}
          >
          <ListItemIcon><PeopleIcon /></ListItemIcon>
          <ListItemText classes={{ primary: classes.itemPrimary, textDense: classes.textDense }}>
            Invite To Your Team
          </ListItemText>
        </ListItem>

      </List>

    </Drawer>
  );
}

Navigator.propTypes = {
  classes: PropTypes.object.isRequired,
  onPageChange: PropTypes.func.isRequired,
  onUploadFile: PropTypes.func.isRequired
};

const mapStateToProps = (state) => {
  const { curPage } = state.app;
  return { curPage };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onPageChange: bindActionCreators(loadPage, dispatch),
    onUploadFile: bindActionCreators(uploadFile, dispatch),
    dispatch
  };
};

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps
);


export default compose(withConnect, memo, withStyles(styles))(Navigator);

Answer 1

请注意，传递到useEffect挂钩的函数始终在渲染后运行。

您的useEffect不会重新渲染组件以查看更改。仅更改状态会导致重新渲染。如果要重新渲染，则需要先使用useState钩子，然后再从setState钩子中使用useEffect。或者，您可以只将这两行作为渲染的一部分运行（将它们从useEffect钩中移除，将其放置在外部）：

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});

但是，当我查看您的代码时，我认为您可以只使用curPage === 'invite' && classes.itemActiveItem而不是activePage['invite'] && classes.itemActiveItem并删除与activePage对象相关的那些不必要的行。它将使事情变得容易得多。

为什么我的React组件的CSS不能动态更新？

1 个答案: