Как использовать ИЛИ Условие в Тернарном операторе в ReactJS - PullRequest
Новая
       10

Как использовать ИЛИ Условие в Тернарном операторе в ReactJS

0 голосов
/ 01 апреля 2019

Я новичок в ReactJS.На самом деле я работаю над Menues в проекте ReactJS.Здесь я реализовал логику для активного меню. Например, если пользователь находится на странице 2, он покажет активное меню для пользователя.В настоящее время я использую window.location.pathname для сравнения страницы пользователя, но я хочу с обоими.Я имею в виду, если пользователь нажимает на меню, я сравниваю его со значением состояния или, если пользователь находится на странице, я сравниваю его с window.location.pathname.Я новичок в ReactJS, пожалуйста, эксперт, помогите мне.Я также предоставлю код, если кто-то не полностью понимает мою формулировку проблемы.Извините, если я допустил ошибку в грамматике английского, потому что я не являюсь носителем языка.Спасибо

Код 

<code>    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()}
Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

Ответы [ 3 ]

1 голос
/ 01 апреля 2019

Проверьте это. Вы можете написать условие как 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>
1 голос
/ 01 апреля 2019

Похоже, вы пытаетесь восстановить функциональность NavLink.Вы можете изменить код JSX ниже и получить требуемое поведение 

<NavLink
  to={"/" + item.name}
  name={item.name}
  key={item.name}
  className="menu"
  activeClassName="active"
  onClick={() => this.setState({ activeMenu: item.name })}
>
  <span> {item.name} </span> |
</NavLink>

Я использую activeClassName для добавления активного класса, когда элемент активен.Рабочие коды и ящик .

1 голос
/ 01 апреля 2019

Использование состояния с именем 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, который вы можете использовать для определения вашего текущего пути.

...