Question

我是ReactJS的新手。实际上我正在ReactJS项目中的Menues上工作。在这里，我已经实现了活动菜单的逻辑。例如，如果用户在页面2上，它将显示“用户活动菜单”。目前，我正在使用window.location.pathname来比较用户页面，但我想同时使用两者。我的意思是，如果用户单击菜单，则将其与状态值进行比较；如果用户在页面上，则将其与window.location.pathname进行比较。我是ReactJS的新手，请专家帮助我。如果有人对我的问题陈述不完全理解，我还将提供代码。对不起，如果我因为不讲英语而在英语语法上弄错了。谢谢

代码

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Answer 1

使用称为activeMenu的状态会不必要地使您的组件复杂化。您应该考虑通过以下方式对其进行简化：

import React, { Component } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import { Icon } from 'semantic-ui-react';
import Header from '../header/header';


// Style Components
import {LeftMenuStyle} from '../appStyles/appStyles'


class LeftMenuList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const menus = [
      {
        name: 'dashboard',
        icon: 'dashboard',
      },
      {
        name: 'organizations',
        icon: 'sitemap',
      },
      {
        name: 'contacts',
        icon: 'phone square',
    },

      {
        name: 'products',
        icon: 'shopping cart',
      },
      {
        name: 'sales',
        icon: 'credit card',
      },
      {
        name: 'purchases',
        icon: 'shopping bag',
      },
      {
        name: 'shipments',
        icon: 'shipping',
      },
      {
        name: 'everything',
        icon: 'ald',
      },
      {
        name: 'reports',
        icon: 'chart line',
      },
      {
        name: 'logout',
        icon: 'arrow right',
      }

    ];

    return (
      <div>
        <Header />
        <LeftMenuStyle>
        <div className="left-menus">
          {menus.map(item => {
              return (
                <NavLink to={"/"+item.name} name={item.name} key={item.name}
                  className='menu'
                  activeClassName='active'
                  >
                  <Icon name={item.icon} size="large"/>
                  <span>{item.name}</span>
                </NavLink>
              )
          })}
        </div>
        </LeftMenuStyle>
      </div>
    );
  }
}

export default withRouter(LeftMenuList);

Link中的react-router-dom组件会自动将您的路径更改为活动路径，因此您的活动链接将获得active类名。

在这里您看到我们用WithRouter函数包装了组件，这为您提供了react-router特定的路径对象，您可以使用该对象确定当前路径。

Answer 2

检查一下。您可以将条件写为pathName === item.name || this.state.activeMenu === item.name ? 'menu active' : 'menu'

注意：在下面的示例中，活动链接的颜色设置为红色。

class LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeMenu: 'dashboard'
    };
  }

  render() {
    const menus = [
      {
        name: 'dashboard',
        icon: 'dashboard',
      },
      {
        name: 'organizations',
        icon: 'sitemap',
      },
      {
        name: 'contacts',
        icon: 'phone square',
    },

      {
        name: 'products',
        icon: 'shopping cart',
      },
      {
        name: 'sales',
        icon: 'credit card',
      },
      {
        name: 'purchases',
        icon: 'shopping bag',
      },
      {
        name: 'shipments',
        icon: 'shipping',
      },
      {
        name: 'everything',
        icon: 'ald',
      },
      {
        name: 'reports',
        icon: 'chart line',
      },
      {
        name: 'logout',
        icon: 'arrow right',
      }

    ];

    const pathName='dashboard';
    return (
      <div>
        <div className="left-menus">
          {menus.map(item => {
              return (
                <a to={"/"+item.name} name={item.name} key={item.name}
                  className={pathName === item.name || this.state.activeMenu === item.name ? 'menu active' : 'menu' }
                  onClick={() => this.setState({activeMenu: item.name})}
                  >
                  <span>  {item.name}  </span>
                  <br/>
                </a>
              )
          })}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<LeftMenu />, document.getElementById("app_root"));

.menu {
  color: black;
  cursor: pointer;
}

.menu.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app_root"></div>

Answer 3

好像您正在尝试重做NavLink的功能。您可以将JSX代码更改为以下代码并获得所需的行为

declare @Students table (StdId int, Gender char(1), Subj varchar(10))

insert into @students select 1, 'F', 'Math'
insert into @students select 2, 'M', 'Math'
insert into @students select 3, 'M', 'Math'
insert into @students select 4, 'F', 'Math'
insert into @students select 5, 'F', 'Math'
insert into @students select 6, 'F', 'History'
insert into @students select 7, 'M', 'History'
insert into @students select 8, 'F', 'English'
insert into @students select 9, 'F', 'English'
insert into @students select 10, 'M', 'English'
insert into @students select 11, 'F', 'English'
insert into @students select 12, 'M', 'English'

该项目处于活动状态时，我正在使用activeClassName添加活动类别。工作codesandbox。

如何在ReactJS中的三元运算符中使用OR条件

3 个答案: