Question

我的代码有问题。我使用ReactJS，如果navLink处于活动状态，则尝试更改状态isActive。

class Navigation extends Component {
  constructor() {
    super();

    this.state = {
      isActive: false,
    };
  }

  activeLink = () => {
    this.setState({
      isActive: true,
    });
  };

render() {
    const { isActive } = this.state;

    return (
      <Fragment>
        <MenuList>
          <NavLink to="/dashboard" isActive={this.activeLink}>
            <MenuItem className={classes.menuItem}>
              <ListItemIcon
                style={{ color: isActive ? 'blue' : 'black' }}
                className={classes.icon}
              >
                <HomeIcon />
              </ListItemIcon>
              <ListItemText
                classes={{ primary: classes.primary }}
                inset
                primary={<FormattedMessage {...messages.dashboardItem} />}
              />
            </MenuItem>
          </NavLink>
...

Answer 1

isActive上的NavLink属性是一种用于添加额外逻辑以说出navlink是否应处于活动状态的函数，如果该navlink处于活动状态（例如我相信），则不会触发该函数您正在尝试将其用于。

您可以使用它来进行位置匹配的标准检查，如果需要，还可以调用setState，尽管它不是专门为以下目的设计的：

activeLink = match => {
    if (!match) return false;
    this.setState({
       isActive: true,
    });
    return true;
};

如果navlink处于活动状态，则更改状态

1 个答案: